Une page sur plusieurs colonnes
Mon nouveau patron, Anthony, vient de me filer LA solution pour ne plus avoir ces soucis avec les divs en float left qui ne donnent pas la taille au div père.
Explication, vous voulez créer une page avec Deux colonnes: un menu à gauche, et le contenu... jusque là... avec des float c'est simple:
<div id="content">
<div id="menu">
</div>
<div id="main">
</div>
</div>
Et le CSS qui va avec:
#content{
/* on centre le div*/
margin-left: auto;
margin-right: auto;
/* une taille */
width: 800px;
}
/* Nos deux colonnes */
#menu, #main{
float: left;
}
/* et les tailles */
#menu {
width: 20%;
}
#main {
width: 75%
}
/* voyons le soucis */
#content { border: 1px solid red }
#main, #menu {border: 1px solid blue }
Si vous mettez du contenu dans le menu et dans le "main" alors vous verrez... le div principal refuse de s'agrandir selon le contenu des deux div qui sont à l'intérieur...
La solution ? → mettre aussi un 'float: left' sur le "content"
#content{ float: left}
et voilà !
Anthony me disait: "cherche pas à comprendre, mets tous les div en float left, et tu arranges les tailles au fur et à mesure". Je vous le dis, je me sens tellement mieux :)
Pas de commentaire pour le moment
Trackbacks
Pour ajouter un trackback (retrolien) sur ce ticket, utilisez cette adresse: http://www.metal3d.org/index.php/trackback/default/tb?id=blog%2F12
