title: Two divs floating left and right: How can I keep them on the same level when a page resizes?
body: <p>Given the following HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="left" style="float: left; background-color: #777; width: 500px;"&gt;
        Here is some content. Blah blah blah etc.
        &lt;div style="height: 50px;"&gt;Some more content&lt;/div&gt;
        And finally some more.
      &lt;/div&gt;
      &lt;div id="right" style="float: right; background-color: #aaa; width: 500px;"&gt;
        Here is some content. Blah blah blah etc.
        &lt;div style="height: 50px;"&gt;Some more content&lt;/div&gt;
        And finally some more.
      &lt;/div&gt;
      &lt;div style="float: clear;"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What can I do to <code>div#container</code> or another tag to prevent <code>div#right</code> from moving under <code>div#left</code> when I resize the browser window such that the windows width is smaller then <code>1000px</code>?</p>