2 оставленных плавающих div, когда div1 перестает сжиматься, div2 начинает наложение ... как предотвратить?

Question

У меня есть это:

+--LEFTFLOATEDDIV1-+ +--LEFTFLOATEDDIV2-+ <--- screen edge
| min-width:400px  | |                  |
| width:50%        | |                  |
+------------------+ +------------------+

Сжатие окна браузера приводит к уменьшению div1, а затем останавливается на 400px, как и должно быть. Однако при уменьшении еще больше div2 продолжает двигаться влево, перекрывая div1. Как мне предотвратить это? Когда div1 перестает сокращаться, я бы хотел, чтобы div2 прекратил движение. Как?

Answer 1

Разве вы не можете просто дать минимальную ширину обертке вокруг обоих div?Ширина Div1 min составляет 400 пикселей, и, скажем, ширина Div2 = 300 пикселей, создайте оболочку с min-width=700px (+ границы):
http://jsfiddle.net/Zb5MV/

Answer 2

Просто оберните их в div контейнера / держателя с минимальной шириной, равной обеим min-width (s) внутренних div.

Таким образом, встроенный элемент будет выглядеть примерно так ...

<div style="min-width:800px;">
    <div style="min-width:400px; width:50%; float:left; height:100px;background-color:#ccc;">
        &nbsp;
    </div>
    <div style="min-width:400px; width:50%; float:left; height:100px;background-color:#eee;">
        &nbsp;
    </div>
</div>

Не забывайте, что минимальная ширина не поддерживается IE6.

Answer 3

Попробуйте удалить поплавок из правого деления.