CSS Layouts - Pro CSS Techniques - page 129

The two-column widths scale up, as does the text content; the only item that does not
scale up is the heading, as this is a fixed-width img element. Given that, you could just as easily
use scaling text for that area.
When Elastic Layouts Attack!
Predictably, there's another gotcha to mention now. An elastic layout is perhaps too helpful to
users. What if they scale things up so much that the page doesn't fit in the browser window?
Silly them, you might be tempted to say, but there will be times when you'll want to take back
some control. Here's where a hybrid layout comes in.
Elastic Layout: Constrained
In the constrained version—a slight tweak of the previous version—you use ems for sizing the
text and the widths of the wrapper, navigation, and content div s. However, you stop them from
growing too big by setting a percentage for the max-width property. For the wrapper div , let's tell
the browser that the maximum it should go up is 95 percent of the browser viewport. The navi-
gation and content are constrained to 25% and 75% , respectively. Here is the amended CSS:
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;
max-width:95%;
margin:10px auto;
text-align:left;
background:#dade75;
border:1px solid silver;
}