O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Improving your element dimensioning using the box-sizing property

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:

Improving your element dimensioning using the box-sizing property

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required