html - 非常基本的两列布局。为什么第二列跨越第一列？

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

嗨，现在给overflow:hidden

像这样

#header-banner {
    overflow:hidden;
}

演示

Answer 2

因为您将float定义为您的第一个 DIV。因此，第二个 div 无法识别高度。像这样写

#col2 {
    overflow:hidden;
}

检查这个http://jsfiddle.net/yrkrJ/4/

阅读更多http://www.quirksmode.org/css/clearing.html