Box Model problems with width and height

The box model as specified by the W3C add margin, borders and padding to the width or height values of an element.
The idea behind this model was to allow content width to be explicitly set and kept separate from padding, border and margin.
Instead of thinking of a traditional cardboard box with a set width, that contains padding, it may help to think of the content, of a fixed size first, then add padding the box (border) and margin outside.
For example if we use the following CSS to style a box element

.box{ width:100px;    
	margin:10px;    
	padding:5px;    
	border:1px;    
}

The Standards Box Model
For this example Content is the area available to text etc.

Content= 100px.      
border, padding, margin= 32px.    
Total box size = 132px.    
132px = Left(margin 10px + border 1px + padding 5px) + Content(width 100px) + right(padding 5px + border 1px + margin 10px).

Now that would be all well and good if all browsers implemented it as specified, unfortunately that's not the case.

The Non Standards ( Quirky ) Box Model
Many non-standard compliant browsers set the total box width and shrink the content area by the size of the margin, padding and borders.
Using the same CSS as above.

Content= 68px.    
border, padding, margin= 32px.    
Total box size = 100px.    
100px = Left(margin 10px + border 1px + padding 5px) + Content 68px ( width 100px - 32px(Left + Right)) + right(padding 5px + border 1px + margin 10px).

Mode Switching
Now to complicate things a little more some of the browsers that get it wrong can be helped by doctype switching. Putting the browser into Standards Mode tells it to use the Standards Box Model
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
http://www.hut.fi/~hsivonen/doctype.html

Hacks
There have been many hacks developed to fix the non-standard compliant browsers that don't switch between Standards and Quirks mode. Hacks have been a popular method of controlling the differences in the box models.
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Most websites should have no reason to need hacks and if you can get away without using them your site will be easier to maintain.

Extra Containment
Alternatives to hacks include not specifying margin, padding or borders on the element with width set.

<div style="width:100px;">    
	<div style="margin:10px; border:solid 1px red; padding:5px;"> Displays the same in most browsers, total width 100px</div>    
</div>

Design Philosophy
Design your sites to look as good as possible for the browsers of your target market, without the need to be exactly the same. Your designs don't need to look exactly the same in every combination of browser and OS.
Most web surfers only use one browser, so have nothing to compare the design with. Try to use fluid, flexible designs that don't require pixel perfection.
http://www.alistapart.com/articles/dao/

The Future
In CSS3 there is the Box-Sizing property which will eventually be supported by newer browsers.
Currently Box-Sizing is only supported by newer versions of Opera.
It wont help us with the current crop of browsers but one day you may be able to decide how the browsers calculate the box dimensions.