CSS3サンプル / box-sizing

■box-sizingを指定しない

左側のボックス

右側のボックス

■box-sizingを指定する

左側のボックス

右側のボックス



■CSS記述例
div.box-left {
    width:50%;
    color:#ffffff;
    text-align:center;
    padding:20px;
    background-color:#981515;
    float:left;
}

div.box-right {
    width:50%;
    color:#ffffff;
    text-align:center;
    padding:20px;
    background-color:#0e7f5b;
    float:right;
}

div.box-sizing {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

.clear {
    clear:both;
}