HTML and CSS Reference
In-Depth Information
Figure 7-8 The way the areas of the box model are laid out when the box-sizing is border-box.
So, if the newsletter box has a specified width of 100%, you don't have to work around the centering issues you saw.
These styles caused the newsletter box to appear bigger than the width of the page:
#newsletter {
color: white;
border-radius: 8px;
border: rgba(0,0,0,0.1) solid 5px ;
url(“../images/icon-newsletter.png”) no-repeat 91% 2%,
url(“../images/bg-newsletter.png”) repeat 0 #00ACDF;
padding: 6% ;
width: 100%;
If you were to give the #newsletter rule set the declaration box-sizing: border-box; , the browser
would make the newsletter box 100% and then apply the padding and border inside that, meaning the newsletter box
wouldn't get any bigger than the defined 100%. Woohoo! Such a simple property makes working with the box model
so much easier. No more math!
Again, box-sizing isn't supported in Internet Explorer 6 and 7, so you should use it only if you're not supporting
those browsers or use it on noncritical styles. Now add a noncritical style to the page and make use of box-siz-
ing: border-box in doing so:
1. In styles.css, find the rule set for input[type=”text”], input[type=”email”] and add the fol-
width: 100%;
2. Save styles.css.
Search WWH ::

Custom Search