Mammouth du PHP |
2937 Messages
27 août 2008, 23:10
Comment faire pour que la div parente suive le comportement du float.
Si tu es dans le cas où un élément a des éléments enfants qui sont tous en positionnement flottant, autrement dit le cas suivant :
Code : Tout sélectionner
<div id="parent">
<div class="enfant">...</div>
<div class="enfant">...</div>
</div>
#parent {
border: 1px solid; /* Une bordure délimitant le parent */
}
.enfant {
width: 100px;
float: left;
}
il faut créer un contexte de formatage, en indiquant que les éléments enfants ne doivent pas déborder de leur parent :
Code : Tout sélectionner
#parent {
overflow: hidden; /* Tout débordement de ce bloc est "masqué", autrement dit neutralisé */
}
Ainsi, la bordure du parent encadre bien les éléments flottants, et ce sous Opera, Safari, Firefox et tous les navigateurs respectueux des standards, ainsi qu'IE 7. Pour IE 6 (et versions antérieures), ça ne marche pas car l'élément parent n'a pas de "hasLayout" (un concept propre à IE, supprimé avec la future version 8, expliqué par
Laurent Denis) ; pour y remédier, il faut lui donner du layout, par exemple en lui donnant une hauteur (sachant qu'IE, jusqu'à la version 6, interprète la propriété height comme s'il s'agissait de min-height) :
Bien entendu, pour éviter que les navigateurs interprétant correctement la propriété height (comme une hauteur
fixe) n'interprète le height: 1%, le correctif pour IE 6- doit être appelé au moyen d'un
commentaire conditionnel :
Code : Tout sélectionner
<!--[if lte IE 6]>
<style type="text/css">
#parent {
height: 1%;
}
</style>
<![endif]-->
) mais j'ai toujours ce souci de contenu plus long que mon menu qui me freine, c'est quoi la parade ?
