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，您将看到布局按预期工作。如果您想要边框和内边距，则在调整主元素大小时必须将它们的大小考虑在内。