2左侧浮动div，当div1停止收缩时，div2开始重叠...如何防止？

Question

我有这个：

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

缩小浏览器窗口会使div1缩小，然后停止在400px，就像它应该的那样。然而，当收缩甚至更多时，div2继续向左移动，覆盖div1。我该如何防止这种情况？当div1停止收缩时，我希望div2停止移动。怎么样？

Answer 1

难道你不能给两个div周围的包装器一个最小宽度吗？ Div1最小宽度为400px，假设Div2宽度= 300px，使用min-width=700px（+边框）制作包装：
http://jsfiddle.net/Zb5MV/

Answer 2

尝试从右侧div中删除浮动。

Answer 3

将它们包装在容器/支架div中，其最小宽度等于内部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本身不支持min-width。