Question

Ok, I have the following layout/CSS:

div#wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1400px;
}

div#header {
    float: left;
    margin: 50px 15px 0 50px;
    width: 135px;
}


div#blog {
    display: inline;
    float: left;
    margin: 50px 15px 0 50px;
    width: 1080px;
}

div#site {
    float: left;
    width: 100%;
}

with:

<div id="site">
   <div id="wrap">
      <div id="header"></div>
      <div id="blog"></div>
   </div>
</div>

So, site covers window, ‘wrap’ is fixed width and is centered and ‘header’ and ‘blog’ are inside ‘wrap’ with defined width.

The problem is as usual with IE6. ‘blog’ is shown under the ‘header’. So it seems that float and/or margin does not work.

It seems that it’s not a double margin float bug, at least in DebugBar I see correct margins, but also there are some offsets (50px for header), which I don’t know what it is, actually. Anyway, i tried to add ‘display: inline’ to both ‘header’ and ‘blog’, and it does not help.

I don’t have ie7 to see, but it does show correctly in ie8.

I went through several tutorials on floating bugs for ie6, but could not find a solution for my problem (or i might have missed it).

Any ideas how to ‘heal’ it without adding extra div’s (i hope it’s possible with css, like with doublemargin bug)

p/s/ total width of divs with margin is 1345 < 1400.

EDIT1:
the only thing that is strange is ‘wrap’ has 0 height.

Answer 1

EDIT1: the only thing that is strange is ‘wrap’ has 0 height.

Please read http://www.quirksmode.org/css/clearing.html . However, the described issue doesn’t appear in IE6 because of another bug; floats are automatically cleared.

Also, to prevent double-margin bug, make sure you define display:inline for all floating elements. Avoid adding display: inline to #wrap, it’ll cause the previous issue (#blog appearing under #header).

edit: I was able to reproduce the issue at reznikdavydov.com. Inside #header, there is a <div class=menu> which has width: 300px set. The bug in IE6 causes that the wrapper (#header) is incorrectly expanded so that div.menu cannot overflow out of it. This is the reason why #header and #blog cannot fit side by side: the computed with of #header is 135px in modern browser, but 300px in IE6. The solution is to remove the width:300px rule from .menu selector.