[résolu] Dépassements avec des blocs imbriqués flottants

Bonjour,

Pour illustrer mon problème, je vais inventer un exemple de mise en page.
J'ai un bloc principal contenant un bloc flottant. Le bloc principal contiendra un simple texte et le bloc flottant représentera une image alignée à droite.

Styles:
.bloc_principal{background-color:yellow;}
.bloc_flottant{background-color:orange;float:right;}
Html: (section)
<div class="bloc_principal>Bonjour<div class="bloc_flottant"><img src="..." /></div></div>

Sur IE, tout s'affiche correctement.
Sur Mozilla, l'image dépasse du bloc principal.

Conclusion: Mozilla ne tient pas compte des blocs flottants pour définir la hauteur du bloc principal.

Solution: Indiquez la hauteur du bloc principal.
Cette solution n'est pas idéale car elle impose de calculer la hauteur. Supposons qu'on change la taille d'une image ou d'une police et hop, il faut recalculer la taille. Il me semble qu'utiliser un tableau pour le bloc principal fonctionnerait bien mais bon... c'est plus du CSS!

Quelqu'un a t-il une solution à ce problème?
Merci d'avance,

Arnaud
Modifié par ArnaudP (27 Sep 2006 - 15:26)

Salut,

La question et les techniques à mettre en oeuvre sont ici :
http://www.blog-and-blues.org/articles/Float%2C_clear_et_contextes_de_formatage

Attention ça demande une lecture attentive et patiente.

Merci beaucoup, cet article est fort intéressant, même si au début, je n'ai pas immédiatement vu qu'il apporterait la solution à mon problème.

Il s'agit simplement d'ajouter overflow:auto; dans le bloc principal pour que ce dernier calcule automatique sa taille par rapport aux fils flottants.

Encore une fois, merci !

ArnaudP a écrit :
Merci beaucoup, cet article est fort intéressant, même si au début, je n'ai pas immédiatement vu qu'il apporterait la solution à mon problème.

Il s'agit simplement d'ajouter overflow:auto; dans le bloc principal pour que ce dernier calcule automatique sa taille par rapport aux fils flottants.

Encore une fois, merci !

Hello,

Pour rappel, le premier réflexe qui est de se jeter sur la FAQ, apporte très souvent ses fruits :
http://forum.alsacreations.com/faq/#item6