title: Strange float behaviour in IE7
body: <p>I want to create a simple box with a header bar containing a title and some tool buttons. I have the following markup:</p>
  
  <pre><code>&lt;div style="float:left"&gt;
      &lt;div style="background-color:blue; padding: 1px; height: 20px;"&gt;
          &lt;div style="float: left; background-color:green;"&gt;title&lt;/div&gt;
          &lt;div style="float: right; background-color:yellow;"&gt;toolbar&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="clear: both; width: 200px; background-color: red;"&gt;content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This renders fine in Firefox and Chrome:</p>
  
  <p><a href="http://www.boplicity.nl/images/firefox.jpg">http://www.boplicity.nl/images/firefox.jpg</a></p>
  
  <p>However IE7 totally messes up and puts the right floated element to the right of the page:</p>
  
  <p><a href="http://www.boplicity.nl/images/ie7.jpg">http://www.boplicity.nl/images/ie7.jpg</a></p>
  
  <p>Can this be fixed?</p>