box-sizing: border-box and IE7

Internet Explorer 7 doesn’t support box-sizing: border-box. You can, however, achieve the same thing with nested divs.

Replace

<div class="border-box">

    ... content ...

</div>
.border-box {
    box-sizing: border-box;
    width: 50%;
    font-size: 50%;
    margin-bottom: 0.5em;
    background: green;
    padding: 5em;
    border: 5px solid red;
    overflow: hidden;
}

with

<div class="border-boxish">
    <div class="border-boxish-inner">

        ... content ...

    </div>
</div>
.border-boxish {
    width: 50%;
    font-size: 50%;
    margin-bottom: 0.5em;
    background: green;
}

.border-boxish-inner {
    padding: 5em;
    border: 5px solid red;
    overflow: hidden;
}

You don’t need to use all css-rules from the example. I just included them to show what goes where.