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

Question

我想创建一个简单的标题+内容+页脚+侧栏。侧边栏必须悬浮在页眉和内容元素上方，并且如果内容比内容高，则必须将页脚向下推（如下所示：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的问题，但是它们都是宽度不超过wrapper的。

我选择了float：right而不是绝对定位，因为footer的位置必须依赖侧边栏高度（如果有人知道如何用绝对定位完成这个操作，那么完美！）。

我希望有任何想法来解决这个问题。

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.net/gnx2z/