CSS Layouts - Pro CSS Techniques - page 127

alongside the font size so that the two aspects are linked in some way. If the font size is reduced,
the line length—and along with it the page width—comes down accordingly, and vice versa.
Thankfully, there is a method for accomplishing this goal: the elastic layout.
In an elastic layout, when you change the font size, other elements scale up or down
accordingly. You use em measurements rather than pixels or percentages. An em is directly
related to the size of the typeface, so if you specify a width for the wrapper in terms of ems,
when you increase the font size the width of the wrapper goes up as well.
The first step is to set a sensible baseline. On most browsers, the default font size is 16 pix-
els. If you can knock the default down to 10 pixels in the CSS for the body, calculations will be
a lot easier from that point on. You can do this by setting font-size in the body to 62.5%
(62.5 percent of 16 = 10):
body {
font-size:62.5%;
}
Then, knowing that each em represents 10 pixels at the default font size, you can use ems
for subsequent measurements. For example:
h1 {
font-size:2em
}
would give you level 2 headings of 20 pixels at the default font size, but these headings would
scale up if the user prefers.
Let's look at the amended style sheet for the elastic layout. As before, the HTML is
unchanged; only the CSS is different. The significant changes are highlighted in bold:
body {
margin:0;
padding:0;
text-align:center;
background: #f0f0f0 url(body-bg.gif) repeat-x top;
font-size:62.5%;
}
#wrapper {
font-size:1.4em;
width:56em;
margin:10px auto;
text-align:left;
background:#dade75;
border:1px solid silver;
}
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;