Une page sur plusieurs colonnes

24/10/2007

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 :)

Ça peut vous intéresser aussi


QRcode sur votre blog

Depuis que je suis sur Google Phone (Android) je découvre ...


CSS transformations transitions animations

Les animations dans une page web, Dieu sait à quel ...


Quick comment HTML

Tout petit billet mais au combien utile pour ceux qui,...

Merci de m'aider à financer mes services

Si vous avez apprécié cet article, je vous serai reconnaissant de m'aider à me payer une petite bière :)

Si vous voulez en savoir plus sur l'utilisation de flattr sur mon blog, lisez cette page: Ayez pitié de moi

Commentaires

Ajouter un commentaire

Ajouter un commentaire

(*) Votre e-mail ne sera ni revendu, ni rendu public, ni utilisé pour vous proposer des mails commerciaux. Il n'est utilisé que pour vous contacter en cas de souci avec le contenu du commentaire, ou pour vous prévenir d'un nouveau commentaire si vous avez coché la case prévue à cet effet.