2 left floated divs, when div1 stops shrinking, div2 begins overlaying… how to prevent?

Question

I have this:

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

Shrinking the browser window makes div1 shrink and then stops at 400px, as it should. However, when shrinking even more, div2 keeps moving left, overlaying div1. How do I prevent this? When div1 stops shrinking, I would like for div2 to stop moving. How?

Answer 1

Can't you just give a min-width to a wrapper around both divs? Div1 min width is 400px, and let's say Div2 width = 300px, make a wrapper with min-width=700px (+borders):
http://jsfiddle.net/Zb5MV/

Answer 2

尝试从右div移除浮点数。

Answer 3

Just wrap them in a container/holder div with a min-width that is equal to both min-width(s) of the inside divs.

So inline it would look something like this...

<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>

Don't forget min-width is not natively supported by IE6.