[X]

The Box Model Hack

layout hacks 2002 dead

A fake CSS property with an escaped quote in it, used to feed two widths to two browsers.

In 2026: No longer needed. Internet Explorer 5 measured width as border to border instead of content, so a box sized for one browser was wrong in the other. The hack works because IE5 choked on the escaped quote and stopped parsing the rule there.

Where it came from: Tantek Celik, devised around 2001 while he worked on IE5 for the Mac, published on tantek.com and widely reprinted around 2002. Wikipedia

<style>
div.content {
  padding: 10px;
  border: 5px solid black;
  width: 400px;            /* what IE5 needs, border to border */
  voice-family: "\"}\"";   /* IE5 chokes here and stops reading the rule */
  voice-family: inherit;
  width: 370px;            /* what everyone else needs, content only */
}
</style>

<!-- The 2026 version. One line, no trickery. -->
<style>
div.content { box-sizing: border-box; width: 400px; padding: 10px; border: 5px solid #000 }
</style>
sandboxed demo · breaks nothing but itselfrestart

More in layout hacks

all 20 in layout hacks › · the whole library ›