Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

192 CHAPTER 4 Getting started with CSS3

FIGURE 4-21 Using the box-sizing property to control width calculations

NOTE ALTERNATE BROWSER RENDERING

Remember that in many of these examples, different browsers render differently. In this

example, you will need to add the following style rule to fix Firefox.

-moz-box-sizing: border-box;

If you look closely at Figure 4-21, you might notice that on the left and right sides of the

columns, there is a very small space. This is because div3, div4, and div5 are inside div2; they

fit within the border of div2. If you need these columns to line up exactly with the border of

div2, you can take div3, div4, and div5 out of div2.

Quick check

■■You want to set the width of an element based on its overall width. What should

the box sizing be set to?

Quick check answer

■■box-sizing: border-box;