cross-browser border-box test

by htmlboy

HTML

<div class="container">
    <div class="width300"></div>
    <div class="width300-border"></div>
</div>

CSS

.container{
    width:300px;
    background:yellow;
    overflow:visible;
    padding:10px 0;
}

.width300-border{
    background:green;
    width:100%;
    height:100px;
    border:10px solid brown;
    padding:10px;
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}

/*IE7 Hack*/ *+html .width300-border{
     width:expression(this.parentElement.offsetWidth – 40 + 'px');
}