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

Make this
```
<div style="background-color:blue; padding: 1px; height: 20px;>
```
the parent of the 2 floating divs also
```
clear:all
```