Bonjour,
J'ai un petit souci de positionnement que je ne vois pas comment résoudre.
Je veux créer une page de présentation avec un élément qui sera répété plusieurs fois sur le même modèle.
Dans mon script j'ai une boucle, là dans le code html que je vous présente, j'ai mis seulement deux éléments l'un sur l'autre pour debugging.
De même la feuille css sera séparée lorsque le code sera complet.
La présentation ressemble à ceci :
Un bloc principal (main) contenant tout les éléments.
Un élément "type" répété plusieurs fois :
- 3 blocs left1, left2 et left3 sur une première "ligne". Je les ai mis côte à côte grâce au float:left
- en dessous, un bloc contenant du texte (toto, titi, tata etc) avec un "clear:both" à la fin pour supprimer le "float:left", en background jaune pour le debugging.
On voit bien que le premier bloc de texte (toto0, tutu0, titi0, tata0) disparaît derrière le deuxième bloc (vert) alors que je voudrais que le bloc (rouge) contenant ce texte adapte sa taille en fonction du contenu du bloc texte (toto, titi, tutu etc).
Je peux résoudre ce problème en fixant une hauteur au bloc texte (toto, titi, tutu etc) mais cette hauteur est variable, parfois j'ai 3 lignes de texte, parfois 6 lignes etc...Un "height: auto" ne résous pas le problème. Merci pour vos avis.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 <html> <body> <div id='main'> <div style='position:relative;width:800px;background-color:red'> <div style='float:left;width:100px'> <div>left1</div> </div> <div style='float:left;width:250px'> <div>left2</div> <div>left2.1</div> <div>left2.2</div> </div> <div style='float:left;width:400px'> <div>left3</div> </div> <div style='position:absolute;top:50px;background-color:yellow'> <div>toto0</div> <div>tutu0</div> <div>tata0</div> <div>titi1</div> </div> <div style='clear:both;'></div> </div> <div style='position:relative;width:800px;background-color:green'> <div style='float:left;width:100px'> <div>left1</div> </div> <div style='float:left;width:250px'> <div>left2</div> <div>left2.1</div> <div>left2.2</div> <div>left2.3</div> </div> <div style='float:left;width:400px'> <div>left3</div> </div> <div style='position:absolute;top:50px;background-color:yellow'> <div>toto1</div> <div>tutu1</div> <div>tata1</div> </div> <div style='clear:both;'></div> </div> </div> </body> </html>
Partager