190 CHAPTER 4 Getting started with CSS3
FIGURE 4-20 he clear property set to bothTUsing the box-sizing property
The previous example looks good except for the space on the right side. Many developers
would play with the width settings on the three columns until they found settings that cause
the third column to line up properly on the right. Remember that the reason for the gap on
the right side is that the width of the columns is set to 32 percent because the width is based
on the content of the element, not including the border.
To solve this problem, you can change the way the browser calculates the width by setting
the box-sizing property on div3, div4, and div5. The box sizing has the following valid values.
■■content-box The default setting; calculates the width based on the content width
only.
■■border-box Calculates the width based on the border, padding, and content width.
■■padding-box Calculates the width based on the padding and content width.
In the following example, the columns’ box sizing is set to border-box, and then the width
of the columns is set to 33 percent, 34 percent, and 33 percent.
p {
margin: 0px;
}div {
border: solid;
border-color: black;