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 に設定してみると、レイアウトが期待どおりに機能することがわかります。ボーダーとパディングが必要な場合は、メイン要素のサイズを設定するときにそれらのサイズを考慮に入れる必要があります。