ボックスを2つ並べたときのカラム落ち修正法

Web制作時にボックスを2つ並べるとき

親要素をinfoとして子要素を２つ並べるとします。

    .info:after{
        content: "";
        display: block;
        clear: both;
    }
    .news{
        float: left;
        width: 70%;
        }
    .blog-up{
        float: right;
        width: 30%;
     }

上のように書くと

70％　30％で分けているのにカラム落ちしてしまっています。

原因は70%のサイズ設定がWidthのためPaddingとborderの分がカラム落ちの原因となってしまっているのです。

そこで子要素2つのボックスに
box-sizing: border-box;を付け足します。　ボックスの横幅にpaddingとborderを含めます。

    .info:after{
        content: "";
        display: block;
        clear: both;
    }
    .news{
        float: left;
        width: 70%;
        box-sizing: border-box;
    }
    .blog-up{
        float: right;
        width: 30%;
        box-sizing: border-box;
    }

これで、左右がカラム落ちせずに収まります。