Why is the box hack needed?
The MSIE 5x browser incorrectly implements the Box Model, it puts the padding and border of a box within the specified width. Therefore, to get pixel perfect layout we can use the hack as a work-around.

In the example we want to create a div 350px wide with a 10px border and padding of 15px. In most browsers this will add up to a width of 400px (10 + 15 + 350 + 15 + 10 = 400px) but not our lovely IE5x!!
So we do the following::

div.cont {
border:10px solid #000;
padding:15px;
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:350px;
}

/*for Opera*/
html>body .cont {
width:350px;
}

What happens?
IE5x takes our calculated width (400px) and puts the border and padding on the inside of the div. When it hits the voice family "\"}\"" it will close the style rule. However other browsers which don't have this parsing bug will take the override values which we set below and allow for correct box-model implementation! Note: whenever you use the box hack you also need to use the Opera rule!

If you would like a more detailed explanatiuon of the box hack, please visit www.glish.com/css/hacks.asp

Final note: An alternative method is to nest div's and separate the style settings of padding and borders from any width settings. This is described in better detail at Advanced CSS Layout - Webreference.com.