Search code examples
htmlcssinternet-explorer-7internet-explorer-6

IE 6/7 and floats

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 alt text http://vincentalcivar.com/ie7.png

Solution

  • 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 &nbsp; (and removed the overflow: auto;), since IE6 thinks that the line has no content after the floats.