浮動右元素推下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/