非常基本的兩列布局。爲什麼第二列跨越第一列？

Question

我有一個非常基本的兩列布局。第一列的背景顏色爲白色，第二列爲綠色。我很簡單地通過：

#col1 { 
    background-color: white; 
    float: left; 
} 

#col2 { 
    background-color: green 
} 

<div id="col1"> 

</div> 
<div id="col2"> 
    <!-- green background, and needs to fill up the remaining width, so i can't float left */ 
</div> 

爲什麼第二列跨越頁面的整個寬度並坐在第一列的後面？我只想要兩列，一列是固定寬度，另一列是用完頁面的其餘部分。

看起來很簡單。有一個更好的方法嗎？

這裏有一個小提琴： http://jsfiddle.net/yrkrJ/1/

Answer 1

因爲你定義float到您的第一個DIV。所以，第二個div沒有被認可的高度。這樣寫

#col2 { 
    overflow:hidden; 
} 

入住這http://jsfiddle.net/yrkrJ/4/

閱讀更多http://www.quirksmode.org/css/clearing.html

Answer 2

嗨現在給overflow:hidden

像這樣

#header-banner { 
    overflow:hidden; 
} 

Demo