CSS box model hack alternative

As nearly everyone knows, Microsoft's Internet Explorer just hates to be standards compliant. One of my personal favorites is the need to use the box model hack to fix the way borders and padding are rendered. I'm not a fan of the box model hack.

Happily, there's a simple alternative:

#box {
  width: 150px;
}

#box div {
  border: 5px;
  padding: 20px;
}

And the new HTML would be:

<div id="box">
  <div>
    ...content...
  </div>
</div>

Perfect! Now the box width will always be 150px, regardless of the browser!