title: IE 6/7 and floats
body: <p>My forehead is bruised out of frustration over this issue. In the standards compliant browsers my layout looks fine but, of course, IE7 and IE6 like to make a hot mess of everything. I'm trying to make a simple header that has some text to the left and a form inline on the right. The header is 835px wide and centered using auto margins. Here is my code:</p>
  
  <pre><code>&lt;div id="header"&gt; 
      &lt;span&gt;Some Text&lt;/span&gt;
          &lt;div style="display: inline; float: right; margin-top: 6px; position: relative;"&gt;
              Jump to: &lt;form ... style="display: inline;"&gt; blah blah &lt;/form&gt; 
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As far as I can tell IE6/7 are treating the div containing the form as a block element. It is correctly displayed on the right of the header div but gets pushed down. I have tried giving the inner div a width  and absolute position but to no avail. I would actually like to avoid absolute positioning as well as conditional statements if possible. There has to be something I'm overlooking. Any suggestions?</p>
  
  <p>UPDATE: Here is a screenshot from IE7
  <a href="http://vincentalcivar.com/ie7.png" rel="nofollow noreferrer">alt text http://vincentalcivar.com/ie7.png</a></p>