IE 6/7 and floats

Question

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:

<div id="header"> 
    <span>Some Text</span>
        <div style="display: inline; float: right; margin-top: 6px; position: relative;">
            Jump to: <form ... style="display: inline;"> blah blah </form> 
        </div>
</div>

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?

UPDATE: Here is a screenshot from IE7

Answer 1

I'm not sure why you've marked up the elements like you have, but for some text to the left and a form to the right, I would have done the following:

<div id="header">
    <div id="text_holder">
        <p>Lorem ipsum dolor set amet.</p>
    </div>
    <form>
        ...
    </form>
</div>

And the following CSS:

#header {
    width: 835px;
    margin: 0 auto;
    overflow: auto;
}
#text_holder {
    float: left;
}
#header form {
    float: right;
}

Answer 2

I don't have access to IE6/7 at the moment. However, there are float bugs with each of those browsers. Adding CSS property of zoom: 1 will trigger hasLayout for these elements and help them render as expected.

Although you don't need to add this via a conditional stylesheet, I would recommend it as it is a browser specific fix.

It is possible that some of your other styles are conflicting. I am not sure if you were attempting to fix the issue, but display: inline shouldn't be necessary.

It may help to post a screenshot of how things look in IE6/7.

Answer 3

Change <span>Some Text</span> to <span style="float: left;">Some Text</span>.

Also, you might want to remove to remove margin-top: 6px; position: relative; from the DIV.

Edit: Here's the code.

<div id="header"> 
  <span style="float: left;">Some Text</span>
  <div style="display: inline; float: right;">
    Jump to: <form style="display: inline; margin: 0;"> blah blah </form> 
  </div>
  &nbsp;
</div>

Added a   (and removed the overflow: auto;), since IE6 thinks that the line has no content after the floats.