IE 6/7 and floats

Question

My forehead is bruised due to disappointment on this issue. In standards-compliant browsers, my layout looks great, but of course IE7 and IE6 love to do their best. I am trying to make a simple heading that has text on the left and a form in the line on the right. The title is 835 pixels wide and centered using automatic 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 handle a div containing a form as a block element. It displays correctly to the right of the div header, but it is discarded. I tried to give the inner div the width and absolute position, but to no avail. I would really like to avoid absolute positioning, as well as conditional statements, if possible. There must be something I'm missing. Any suggestions?

UPDATE: here is a screenshot from IE7 alt text http://vincentalcivar.com/ie7.png

Answer 1

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

Alternatively, you can delete to remove margin-top: 6px; position: relative;from DIV.

Edit: Here is 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  (and removed overflow: auto;) since IE6 considers the line after the content to be empty.

Answer 2

I'm not sure why you checked elements like yours, but for some text on the left and form on the right, I would do 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 3

IE6/7 . . CSS zoom: 1 hasLayout .

, , .

Some of your other styles may be in conflict. I am not sure if you are trying to fix the problem, but display: inlinenot required.

This can help post a screenshot of how everything looks in IE6 / 7.