title: CSS - Float & Resizing Windows
body: <p>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.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  #one
  {
      border: 1px red dotted;
      margin-right: 500px;
      min-width: 250px;
  }
  
  #two
  {
     border: 1px red dotted;
     float: right;
     width: 450px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;div id="container"&gt;
  
  &lt;div id="two"&gt;
     This is a floating div.
  &lt;/div&gt;
  
  &lt;div id="one"&gt;
     This div is not floating and has a whole bunch of text inside of it.
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>