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.