div盒不會在其他div下對齊

Question

頁腳div不會在其他div下對齊，但看起來像內容div一樣高。 （在內容和邊欄div之間可見）

這是什麼解決方案？ （什麼是問題，我想知道，太）

#container{ 
    width:1200px; 
    margin:10px auto; 
} 

#content{ 
    width:65%; 
    min-height:350px; 
    margin:10px 10px 0 0; 
    background-color:#f6904e; 
    float:left; 
} 

#sidebar{ 
    width:410px; 
    min-height:350px; 
    margin:10px 0 0 0; 
    background-color:#fddc68; 
    float:right; 
} 


#footer{ 
    margin-top:10px; 
    width:100%; 
    height:20px; 
    background-color:#de3643; 
} 

http://jsfiddle.net/HwM8M/

Answer 1

您需要清除浮動。

說明：http://css-tricks.com/the-how-and-why-of-clearing-floats/

另一個有用的鏈接：http://css-tricks.com/all-about-floats/

演示：http://jsfiddle.net/lotusgodkk/HwM8M/1/

HTML：

<br class="clear" /> 

新增CSS：

.clear { 
    clear:both; 
} 

Answer 2

添加到您的#footer CSS：

clear: both; 

編輯JS：

http://jsfiddle.net/HwM8M/

Answer 3

試試這個：

<div style="clear:both;"> 
<div id="footer"> 
    Wouter Schaeffer 
</div> 

Demo

Answer 4

在#footer添加display:inline-block：

#footer{ 
    margin-top:10px; 
    width:100%; 
    height:20px; 
    background-color:#de3643; 
    display:inline-block;/*Add this*/ 
} 

fiddle