HTML and CSS Reference
In-Depth Information
}
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:
width: 88%;
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:
