CSS: Box Model Problem/Hack

The problem caused by different browsers way of interpreting a CSS element has emerge the need of CSS hack. The box model hack was developed by Tantek Celik, the lead developer of Internet Explorer for the Mac to solve the issue on IE 5 border and padding problem. The total width of the box SHOULD be calculated by adding the border thickness on the left and right, the padding on the left and right and the width of the content. Thus, Consider the following code:

background: #ff8132;
border: 5px solid #ff0000;
padding: 15px;
width: 100px;

The above code should create a box with a 5-pixel border and 15 pixels of padding around the content which has a 100 pixel width. This gave a total width of 140 pixels.