Div contenant des div en "float"

[Nissone]

Bonjour,

dans la construction de mes pages, j'utilise très souvent une div générale qui correspond un peu à "l'espace du site" et qui englobe mon contenu.

Très fréquement, j'utilise pour ce contenu la propriété float.

Grosso modo, ça donne ça :

<div style="background:blue; padding:20px"><!-- ma div contenu -->
<div style="float:left; background:gold">Une<br/>colonne<br/>à<br/>gauche</div>
<div style="float:left; background:pink">Une<br/>colonne<br/>à<br/>droite</div>
</div>

Et c'est donc toujours le même problème qui se pose à moi : il semble que les navigateurs (au moins I.E. et FireFox) ne tiennent pas compte de la hauteur des div en float et donc la hauteur de ma div contenu est plus petite que la hauteur des div à l'intérieur.

Est-ce que j'ai réussi à m'expliquer ou je vous fais un p'tit shéma ?

Est-ce que quelqu'un a une solution ?

[Gribouille26]

Comment as-tu déclaré ces hauteurs?

[ElMoustiko]

En fait, quand tu positionnes tes éléments en flottant, en effet la hauteur n'est plus prise en compte dans le calcul de la hauteur du conteneur, c'est un problème récurrent souvent évoqué ici

La solution, c'est, si tu as un pied de page, c'est parfait, tu lui applique la propriété "clear: both;" sinon, tu ajoutes un <hr /> à la suite de tes 2 <div> avec "clear: both; visibility: hidden;"

La propriété clear: both; permet en quelque sort de regonfler ta division en positionnant l"élément à la suite des autre, alors que normalement il irait se placer en dessous.

[Nissone]

Merci, je regarde tout ça et je vous dis

[Edit : Je vous dis ] Ca marche parfaitement sur ma page de test ( ) mais la page de mon site doit être un p'tit peu plus compliquée... ça ne marche pas .

Mais bon, au moins, j'ai la solution pour quand j'aurais tout nettoyé [/Edit]

Gribouille, en fait, je n'indique pas les hauteurs ; je souhaite que le calcul des hauteurs soit fait en fonction du contenu.

Modifié 14 Novembre 2004 par Nissone