Bonjour,
Je poste un sujet qui a certainement dû déjà être traité plus ou moins, mais sans avoir jamais de réponse satisfaisante
Donc voici ce que je voudrais :
http://imgs.imagup.com/member3/1229025668_screen_colonnes_ok.gif
Je veux deux colonnes côte à côte contenant du textes chacune (en pointillés rouge), ayant pour classe respective "colL" et "colR".
Je veux que ces colonnes soient englobées dans un DIV de classe "cadre" (en gris).
Donc, en toute simplicité, voici le code HTML :
Et le code CSS :
Pour une fois, aucun soucis sous IE6 & 7, mais par contre problème sous FF comme vous pouvez le voir sur l'image suivante
http://imgs.imagup.com/member3/1229025678_screen_colonnes_hs.gif
Bien entendu je ne veux pas utiliser de TABLE pour construire ma page, et je ne veux pas mettre de [u]hauteur fixe[/u] à mon DIV.cadre car la quantité de texte peut varier.
D'autre part je connais déjà la solution d'ajouter un <div style="clear: both;"></div> à la fin de mon DIV.cadre pour le forcer à englober l'ensemble, mais je n'aime pas ce genre de bidouille, car cela ajoute du code "parasite" au HTML. En gros je trouve pas ça propre
Autre précision (qui ne se voit pas forcément dans l'image), mon DIV.cadre est centré sur la page grâce au margin: auto, ce qui exclus le fait de lui attribuer à lui aussi la propriété float.
Sachant qu'il n'existe pas de balises HTML ayant le même comportement qu'un TABLE/TD, je suis bloqué
Si quelqu'un a la solution, je suis preneur.
Merci d'avance !
Modifié par Dionyzos (12 Dec 2008 - 10:53)
Je poste un sujet qui a certainement dû déjà être traité plus ou moins, mais sans avoir jamais de réponse satisfaisante
Donc voici ce que je voudrais :
http://imgs.imagup.com/member3/1229025668_screen_colonnes_ok.gif
Je veux deux colonnes côte à côte contenant du textes chacune (en pointillés rouge), ayant pour classe respective "colL" et "colR".
Je veux que ces colonnes soient englobées dans un DIV de classe "cadre" (en gris).
Donc, en toute simplicité, voici le code HTML :
<div class="cadre">
<div class="colL">
<p>Lorem ipsum bla bla bla...</p>
<p>Curabitur id bla bla bla...</p>
<p>Nonummy ne bla bla bla...</p>
</div>
<div class="colR">
<p>Curabitur id bla bla bla...</p>
<p>Nonummy ne bla bla bla...</p>
</div>
</div>
Et le code CSS :
DIV.cadre {
border: 1px navy solid;
background-color: #eee;
margin: 0 auto;
width: 500px;
padding: 5px;
color: #555;
font-family: verdana;
font-size: 11px;
}
.colL {
border: 1px red dashed;
margin: 1px;
width: 47%;
padding: 0 5px;
float: left;
}
.colR {
border: 1px red dashed;
margin: 1px;
width: 47%;
padding: 0 5px;
float: right;
}
P { text-align: justify; }
Pour une fois, aucun soucis sous IE6 & 7, mais par contre problème sous FF comme vous pouvez le voir sur l'image suivante
http://imgs.imagup.com/member3/1229025678_screen_colonnes_hs.gif
Bien entendu je ne veux pas utiliser de TABLE pour construire ma page, et je ne veux pas mettre de [u]hauteur fixe[/u] à mon DIV.cadre car la quantité de texte peut varier.
D'autre part je connais déjà la solution d'ajouter un <div style="clear: both;"></div> à la fin de mon DIV.cadre pour le forcer à englober l'ensemble, mais je n'aime pas ce genre de bidouille, car cela ajoute du code "parasite" au HTML. En gros je trouve pas ça propre
Autre précision (qui ne se voit pas forcément dans l'image), mon DIV.cadre est centré sur la page grâce au margin: auto, ce qui exclus le fait de lui attribuer à lui aussi la propriété float.
Sachant qu'il n'existe pas de balises HTML ayant le même comportement qu'un TABLE/TD, je suis bloqué
Si quelqu'un a la solution, je suis preneur.
Merci d'avance !
Modifié par Dionyzos (12 Dec 2008 - 10:53)
:
