The model known as box-model, illustrated in the following screenshot, which requires a calculation to find out the total width of the element including borders and padding, is getting outdated:
The following example shows the concept of box-model that divides the useful area between two divs with padding of five percent on each side of these containers and a 2 px border which will make the width calculation more difficult:
div.splitted {
padding: 0 5%;
border: 2px solid black;
float: left;
width: ?; /* real value= 50% - 10% - 4px */
}With CSS3, we have the
box-sizing property which receives the value border-box, meaning this width value already considers the padding and border dimensions. Although it works well in Versions 8 and higher of Internet Explorer browser, this property does not work purely on IE6 and IE7. If you need to grant support for these browsers, there is a polyfill which does this complementary task...