css - 2列布局不起作用

我尝试使用此人的教程进行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;
}

最佳答案

您的填充和边框实际上正在占用您的600px内容。因此，尝试将其设置为580px，它将起作用。

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

或者当然可以根据需要完全删除填充和边框，并保留600px size。

检查演示here

关于css - 2列布局不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17138752/