Проблема с плавающей точкой в ​​IE, вторая с плавающей точкой div вызывает «очистить»?

Question

У меня проблемы со следующим (примером) кода. Я пытаюсь добиться следующего: div # id1 - это контейнер div. Он содержит div с необязательным изображением и div для основного текста. Div # id2 похож. Div # id3 является контейнером div для меню. Он должен быть расположен к верхней части #container. Теперь, если в # id1 есть изображение, div # id3 будет перемещен вниз. Это работает в FF, Chrome и т. Д. Это также работает в IE, но только с div # id1, как только я добавляю div # id2, кажется, IE использует его для очистки 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>

Попробуйте приведенный выше код в FF и IE, и вы увидите разницу. IE портит. Затем удалите div # id2 и его содержимое и попробуйте снова. Здесь IE показывает все отлично.

Есть какие-нибудь подсказки, как это исправить?

Ура, Bartezz

Answer 1

Кажется, что пустой div имеет минимальную высоту, предназначенную для содержания текста, что приводит к его перемещению вниз - в Fx пустые div не отображаются вообще, и не сохраняют место для содержимого внутри них, потому что там не любой Попробуйте изменить 2-ю внутреннюю часть # id1 и ширину div # id2, чтобы уменьшить, и вы увидите, что фиолетовый div выталкивается на высоту строки - я предполагаю, что ширина заставляет их быть так близко друг к другу, тот IE (но не другие браузеры) не знает, как освободить место для этого, таким образом это отталкивает это.

Не знаю, согласуется ли это с вашими идеями, но почему бы вам просто не иметь один левый и один правый элементы и не помещать в них элементы?