css - 2 列布局不起作用

Question

我尝试使用这个人的制作 2 列布局的教程： http ://www.vanseodesign.com/css/2-column-layout-code/

这是我的结果：/ http://jsfiddle.net/WrpA8/

CSS：

#container {
    width: 800px;
    margin: 40px auto;
    border: 1px solid black;
}
#header {
    border: 1px solid black;
}
#sidebar {
    float: left;
    width: 200px;
    padding: 4px;
    border: 1px solid black;
}
#content {
    float: left;
    width: 600px;
    padding: 4px;
    border: 1px solid black;
}
#footer {
    clear: both;
    border: 1px solid black;
}

Answer 1

边框和填充有助于元素的整体宽度。尝试将边框和填充设置为 0，您会看到布局按预期工作。如果您需要边框和填充，则在调整主元素大小时必须考虑它们的大小。

Answer 2

您的填充和边框实际上正在消耗您的600px. 因此，尝试使其成为580px例如，它将起作用。

#content {
    float: left;
    width: 580px;
    padding:4px;
    border: 1px solid black;
}

或者当然，如果您愿意并保留600px size.

在这里查看演示