两个静态宽度 div 的浮动左/边距（ie6）

Question

好的，我有以下布局/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%;
}

与：

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

因此，站点覆盖窗口，'wrap' 是固定宽度并居中，'header' 和 'blog' 在具有定义宽度的 'wrap' 内。

问题与 IE6 一样。 “博客”显示在“标题”下方。所以看起来浮动和/或边距不起作用。

这似乎不是双边距浮动错误，至少在 DebugBar 中我看到了正确的边距，而且还有一些偏移量（标题为 50px），实际上我不知道它是什么。无论如何，我尝试将 'display: inline' 添加到 'header' 和 'blog' 中，但没有帮助。

我没有 ie7 可以看到，但它在 ie8 中可以正确显示。

我浏览了几个关于 ie6 浮动错误的教程，但找不到解决问题的方法（或者我可能错过了）。

关于如何在不添加额外 div 的情况下“治愈”它的任何想法（我希望 css 可以实现，例如 doublemargin 错误）

p/s/ div 的总宽度为 1345

编辑1： 唯一奇怪的是 'wrap' 的高度为 0。

Answer 1

EDIT1：唯一奇怪的是 'wrap' 的高度为 0。

请阅读http://www.quirksmode.org/css/clearing.html。但是，由于另一个错误，所描述的问题没有出现在 IE6 中；浮动会自动清除。

另外，为了防止双倍边距错误，请确保为所有浮动元素定义 display:inline。避免将display: inline添加到#wrap，这会导致上一个问题（#blog出现在#header下）。

编辑：我能够在 reznikdavydov.com 上重现该问题。在#header 内部，有一个<div class=menu>，其中有width: 300px 集。 IE6 中的 bug 导致包装器 (#header) 被错误地扩展，因此 div.menu 无法溢出。这就是#header 和#blog 不能并排放置的原因：#header 的计算值在现代浏览器中是 135px，但在 IE6 中是 300px。解决方案是从.menu 选择器中删除width:300px 规则。

Answer 2

您似乎不需要 CSS，我会从这里开始，看看它是否有效

div#wrap {
    margin:0 auto;
    width: 1400px;
}

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


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

div#site {
    width: 100%;
}