flotteur sur deux éléments

Question

Mon problème est assez complexe à expliquer, donc je vais vous montrer un exemple: http://ewolf.bplaced.de/misc/float.htm

Je veux avoir un élément flottant (la boîte bleue) à placer sur deux d'autres éléments (rouge et vert) et je veux le tout soit largeur fixe et centrée (fait par la boîte avec la bordure noire), tandis que l'arrière-plan de la boîte rouge et vert doit remplir le largeur entière.

Je ne suis pas vraiment sûr si la façon dont je l'ai fait est XHTML/CSS valide, mais cela fonctionne - au moins dans Firefox. Dans IE6, la boîte verte se développe pour s'adapter à la boîte bleue entière - comment puis-je corriger cela dans IE6 ou trouver une autre solution pour l'afficher correctement dans tous les navigateurs?

Answer 1

Vous ne serez probablement pas en mesure de faire cela, en fonction de ce que vous voulez dire exactement.

La raison pour laquelle cela ne fonctionne pas est due à la propriété magique hasLayout de IE6. Tout élément qui a "layout" dans IE6 contiendra ses flottants. La mise en page est déclenchée par des propriétés CSS telles que la largeur ou la hauteur. Voir l'article lié pour plus de détails.

Voir le "acidic float tests" pour une page traitant de ce problème spécifique.

Si vous supprimez la largeur et la hauteur du div center, vous verrez qu'il ne contient plus le flottant, car il n'a plus de disposition.

Bien sûr, ce que vous finissez avec n'est pas ce que vous voulez. Vous pouvez prendre soin de la largeur en ajoutant un div wrapper autour des deux lignes et en définissant la largeur sur celle-ci à la place. Si vous voulez aussi la hauteur fixe, vous pouvez ajouter un div supplémentaire à l'intérieur de chaque rangée (en tant que frère de la boîte bleue de la première rangée) et en définir la hauteur à la place. Si tout cela fait partie d'une conception plus complexe, vous risquez d'avoir à ajouter par inadvertance des propriétés aux lignes qui déclenchent la mise en page, donc cela ne suffira peut-être pas à une solution.

Dans tous les cas, c'est à cela que ressemblerait le HTML, avec la largeur et la hauteur supprimées de la classe center. J'ai conservé la structure d'origine et ajouté CSS en ligne pour démontrer les changements:

<div style="width: 800px"> 
    <div id="row1"> 
     <div class="center"> 
      <div id="box"> 
       Lorem ipsum ... 
      </div> 
      <div style="height: 100px"> 
       Duis autem ... 
      </div> 
     </div> 
    <div id="row2"> 
     <div class="center" style="height: 100px"> 
      Duis autem ... 
     </div> 
    </div> 
</div>