HTML and CSS Reference
The width of the newsletter box is now
• 10px (5px for the left border and 5px for the right) +
• 12% (for the left and right padding) +
• 100% (for the content area)
Although the browser can easily do these calculations, it makes your job styling elements a little harder because you
have to do the math, too. It's not a very human-friendly way of working with the box model, is it? You'll be glad to
hear that the W3C is aware of this issue, and CSS Level 3 introduces the box-sizing property, which allows you
to change how the box model works. Unfortunately, because it's a CSS Level 3 feature, it isn't supported in Internet
Explorer versions 6 and 7. If you have the privilege of not needing to support these older browsers, I cover box-
sizing in a moment, but because the Cool Shoes & Socks scenario requires Internet Explorer 7 support, you need
to fix the newsletter box so it does fit into the page properly:
1. In styles.css, change the width declaration of the #newsletter rule set:
2. Save styles.css.
This solution is still not completely perfect. You've changed the width of the newsletter box to account for the 12%
of padding, but the calculated width is still 88% + 12% + 10px, meaning the newsletter box is still 10px bigger than
100%. Because the border is specifically 5 pixels on each side, you can't adjust the width again to account for the
border, as you can't use percentages with the border-width property.
As you can see in Figure 7-6, the newsletter box isn't quite centered. The left of the newsletter box has a space of
40px, and the right is 32px. This 8px difference is due to the 10px border on the newsletter box (minus 2px for the
border on #main ).
Figure 7-6 The amended newsletter box that is no longer centered with a width of 88%.
To fix this, do the following: