The CSS box model is a pain at times, especially when you consider that Win IE5 (and IE6 in quirks mode) calculates the width and height independantly of the border, padding and margins. Well here's a handy calculator to cure those woes. It has three modes, by default you provide the desired width and height of the box and it calculates the CSS box model sizes for you, if you fix the content size then it allows you to track backwards and find the full size, handy for retro-fitting ie5 box model hacks, and the third mode allows you to fit a box, along with margins into a desired space. I havent had time to fully debug it for all borowsers yet but the underlying javascript (view source to see it) works on FireFox and IE6 so far. And if you already think it's handy then wait! ... i've gone the extra yard and coded it to generate the full CSS for you too, inc my IE5 hack. kind, aren't i?

Update 2006/07/07

Cleaned up some of the CSS, and discovered that the double forward-slash hack works in IE7. the significance of this IE-only hack is that the double forward-slash is used for to mark comments in most C-style languages so it may be possible that some parsers will treat it as a comment and not an outright error. Probably.

Update 2006/03/02: IE7b2 Tested

Nov 05 added the tantek MAC ie hack, see here and here

Note: all browsers are treated as being in "standards" mode as this site uses the HTML 4.01 STRICT doctype. In "quirks" mode IE6 behaves exactly like IE5.5, including it's css parsing.

Live Hacks

These should highlight yellow depending on the browser

ALL             background-color: yellow;

IE 5.x and 6     _background-color: yellow; (you can prefix any combination of _-+~!@$&:.*)

IE 5.x + 6 + 7 //background-color: yellow;

Mac IE 5.2      /*\*//*/background-color: yellow;/**/ 

NOT Mac IE 5.2  /*\*/background-color: yellow;/*//**/ 

Win IE Versions

You can optionally prefix any of these rules with _ to assert that only IE 5.x and 6 see the rule to begin with (See further explanation below).

IE 5.5 + 6 + 7 /background-color: yellow;  (note: not IE 5.0)

IE 5.0       background-color://yellow; 

IE 5.x 1     background-color: "yellow"; 

IE 5.x 2   \\background-color: yellow; 

IE 5.5 1    [background-color]: yellow; ((round) and <triangular> brackets also work)

IE 5.5 2     background-color//: yellow;

The world's smallest box model hack

So here it is, the beauty of the value being enclosed in quotes is that it looks like a normal rule. so a parser is less likely to break and more likely just to ignore it as an invalid value, where as the alternative IE 5.x hack with the backslashes causes the entire rule to break. All of which is just speculation, the key fact is that it works, and is tiny.

div.somediv
{
   padding:   20px;
   width:     160px;
   width:     "200px";   /* IE 5.x box model hack */
}

In real life i prefix the IE 5.x rule with an underscore. as per the IE 5.x-and-6 rule.:

   _width:    "200px";   /* IE 5.x box model hack */

This is possibly safer than the other one because underscores have a special place in CSS: they're valid characters in itentifiers: "news_panel" is a valid CSS id or classname. They also have no other special meaning in nearly every programming language, unlike * ! or + for example. It also helps ensure that future browsers' parsers won't incorrectly read the 200px from within the quotes. Basically for this to work in any browser other than IE 5.x (and 6 in quirks mode) that browser's CSS parser must be broken in two completely seperate ways. Unlikely... but not impossible.

The CSS spec states that margins and padding are calculated relative to the elements font size. what this means is that if your font size and your margin are both set to 2em then your margin, relative to the whole document, will not infact be 2ems but 4ems! to get your margins and paddings consistent across the board, even when scaling, you need to do some reciprocal math. Well actually you dont, because i've gone and done it for you:

broken!

fixed!

Scaling amounts: