Flotteur problème dans IE, deuxième div flotté provoque un «clair»?

Question

J'ai des problèmes avec le code (exemple) suivant. Ce que j'essaie de réaliser est le suivant: div # id1 est un conteneur div. Cela contient une div avec une image facultative et une div pour le corps du texte. Div # id2 est similaire. Div # id3 est un conteneur div pour le menu. Il devrait être situé au topleft de #container. Maintenant, s'il y a une image dans # id1, la div # id3 sera enfoncée. Cela fonctionne dans FF, Chrome, etc. Il fonctionne aussi dans IE mais seulement avec div # id1, dès que j'ajoute div # id2 il semble que IE l'utilise pour effacer la div # id1.

<div id="container" style="background:red;width:800px;min-height:500px;margin:0 auto;"> 
<div id="id1"> 
    <div style="width:200px;float:left;"><!-- this div has optional content and therefore might or might not push the purple div down --></div> 
    <div style="background:yellow;width:600px;float:right;">This is the top right div</div> 
</div> 
<div id="id2"> 
    <div style="background:green;width:600px;float:right;">This is the bottom right div</div> 
</div> 
<div id="id3"> 
    <div style="background:purple;width:200px;">This should be the top left div but is not the case in IE</div> 
</div> 

Essayez le code ci-dessus dans les deux FF et IE et vous verrez la différence. IE bousille. Ensuite, retirez div # id2 et son contenu et essayez à nouveau. Ici, IE montre les choses très bien.

Des indices sur la façon de résoudre ce problème?

Cheers, Bartezz

Answer 1

Le div blanc semble avoir une hauteur minimale destiné à contenant du texte, ce qui l'amène à être poussé vers le bas - dans Fx divs vides ne sont pas représentés du tout, et ne pas enregistrer n'importe quel espace pour le contenu à l'intérieur d'eux, parce qu'il n'y en a pas. Essayez de modifier le 2nd à l'intérieur de # id1 et la largeur de div # id2 pour descendre et vous verrez que le div pourpre est repoussé d'une hauteur de ligne - je suppose que les largeurs les rapprochent les unes des autres, que IE (mais pas les autres navigateurs) ne sait pas comment faire de la place pour cela il le pousse vers le bas. Dunn si cela correspond à vos idées, mais pourquoi ne pas vous juste un div div et un droit div, et div divs à l'intérieur d'eux?