Box Model Hackery The Easy Way

I’ve wrestled with the box model variations between IE and Mozilla for years. And today I finally arrived at what seems to be the absolute easiest way to make things work.

#mydiv { width: 500px; padding: 10px; margin: 0; border: 0; }
* html #mydiv { width: 480px; }

The first line is valid and interpreted by both browsers. The second line is interpreted only by IE. Setting the width to the width you want (500px) minus (padding + margin + border) will give you the effect you want. You’ll have the same size box in both browsers. Yeehah!