css - 2列レイアウト-コンテナの最大幅

Question

2列のレイアウトがあります：http：//jsfiddle.net/KqQ42/1/

ここで、左右の列の両方が最大幅を共有して、page_wrapperと列の間にスペースができるようにします。

幅に1パーセントを追加するだけで、それらはもう並んでいません。

それで、トリックは何ですか？

Answer 1

このように書いてください：

.content_wrapper > div
{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.nav{
 width:25%;
}

これをチェックしてくださいhttp://jsfiddle.net/KqQ42/7/

Answer 2

ここでの問題は、両方の列で宣言した1pxの境界線です。ブラウザのボックスモデルは、境界線を宣言した幅に合計します。境界線の宣言を削除し、幅を合計100％に設定すると、これ以上問題は発生しません。

または、cssプロパティを使用することもできますbox-sizing: border-box; http://paulirish.com/2012/box-sizing-border-box-ftw/

フローティング要素をクリアするためのCSSのみの方法をfinxすることもできます。

http://css-tricks.com/snippets/css/clear-fix/

マークアップで追加のdivを使用するのではなく