IE7 中右浮动元素向下推下一个元素

Question

我正在尝试使用 header+content+footer+sidebar 创建一个简单的标记。侧边栏必须浮动在标题和内容元素上方，如果它比内容高，则必须将页脚向下推（如下所示： http://jsfiddle.net/gWLFN/7/）。

HTML：

<div id="wrapper">
    <div id="sidebar">sidebar</div>
    <div id="header">header</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

CSS：

#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar { 
    float:right; 
    margin-top:50px; 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

问题是在 IE7 中，侧边栏会向下推其他元素。我认为这是因为标题+侧边栏的总宽度大于包装宽度。我发现了很多关于 IE7 中 float:right 问题的帖子，但它们都是针对不超过包装器的宽度的。

我选择了 float:right 而不是绝对定位，因为页脚的位置必须取决于侧边栏的高度（如果有人知道如何使用绝对定位来做到这一点，那就完美了！）。

我将不胜感激任何解决这个问题的想法。

Answer 1

您已经快到了，HTML 结构的顺序有点混乱，并且您强制使用 CSS 宽度，而不是让浏览器找到最适合的宽度。

您可以从嵌套 CSS 类（#sidebar 除外）中删除 width 值，因为默认情况下，除非指定了宽度，否则它们会占用任何剩余宽度。然后你只需要在 HTML 结构中交换 #header 和 #sidebar 就可以了。

请注意，由于我们交换了 #header 和 #sidebar，因此 #sidebar 中的 margin-top 已被改变了。

CSS

#wrapper { 
    width:500px;
}

#header {
    height:100px;
    background-color:red;
}

#content {
    height:300px;
    background-color:green;
}

#footer {
    height:100px;
    background-color:blue;
}

#sidebar { 
    float:right; 
    margin-top: -50px; /*changed this to -50px */ 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

HTML

<div id="wrapper">
    <div id="header">header</div>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

工作示例：http://jsfiddle.网/gnx2z/