CSS - Float & Resizing Windows
I have two divs on a page and one of them is floating on the right. I've set a min-width on the div which is not floating. As I make my browser window smaller, the floating div encroaches upon the non-floating div as expected but continues past the min-width and starts to push all the text in the non-floating div down. How can I stop the floating div from moving past a certain point? I've included sample code below.
<html>
<head>
<style type="text/css">
#one
{
border: 1px red dotted;
margin-right: 500px;
min-width: 250px;
}
#two
{
border: 1px red dotted;
float: right;
widt开发者_如何学运维h: 450px;
}
</style>
</head>
<div id="container">
<div id="two">
This is a floating div.
</div>
<div id="one">
This div is not floating and has a whole bunch of text inside of it.
</div>
</div>
</html>
Ah, I managed to figure it out! I set a min-width on the container div as well and the floating div stops moving once the browser window reaches the minimum width of that container div.
Make a wrap <div>:
<div id="wrap">
<div id="list_events"></div>
<div id="right_content"></div>
</div>
then do this:
#wrap {
min-width: 600px;
}
Setting min-width will do it.
加载中,请稍侯......
精彩评论