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。

查看演示here