Emulate CSS box-sizing in IE7

Box-sizing is a very handy CSS property supported in IE8+ and all modern browsers. It’s essential for flexible layouts development, because it helps you to combine percentage lengths for width and height with fixed value paddings.

With box-sizing set to border-box, a 33% wide element with a padding of 20 pixels will take exactly 33% of horizontal space, instead of 33% + 20px + 20px which is rendered by default. Learn more about CSS box sizing on Chris Coyier’s CSS Tricks and Paul Irish’s blogs.

There are some existing JavaScript solutions to emulate this behavior in IE7, for instance the box-sizing-polyfill, but here is what we’ve been using on a couple of recent projects:

.box-sizing-ie7 {
    /* emulates width: 100% */
    width: expression((this.parentNode.clientWidth - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
}

.box-sizing-ie7 {
    /* emulates width: 33% */
    width: expression((this.parentNode.clientWidth/3 - parseInt(this.currentStyle['paddingLeft']) - parseInt(this.currentStyle['paddingRight'])) + 'px');
}

… and here’s the example for the vertical sizing:

.box-sizing-ie7 {
    height: expression((this.parentNode.clientHeight - parseInt(this.currentStyle['paddingTop']) - parseInt(this.currentStyle['paddingBottom'])) + 'px');
}

This hack is not completely in line with high performance guidelines, so keep an eye on the CPU. Don’t forget to put this in an IE7 specific CSS file using IE conditional comments.