borders and box-sizing

by jpeter06

HTML

<div class="w70 container">
    <div class="inner gray1">
    </div>
</div>
<div class="w30 container">
    <div class="inner gray2">
    </div>
</div>

<div class="w100 container">
    <div class="inner gray3">
    </div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;  
    background:white;
}

.container{
    box-sizing: border-box;
    margin:0px;
    padding:8px; 
    float:left;
}

.w70{
    width:70%;
    height:60%;
}

.w30{
    width:30%;
    height:60%;
}

.w100{
    width:100%;
    height:40%;
}


.inner{
    box-sizing: border-box;
    width:100%;
    height:100%;
    border: 1px dashed orange;
    border-radius: 15px;
}

.gray1{ background:#eee;}
.gray2{ background:#ddd;}
.gray3{ background:#ccc;}