Head First HTML with CSS

frozen layouts
A frozen test drive
Go ahead and add this rule to the bottom of
“starbuzz.css”, and then reload “index.html”. Now
you can see why we call it a frozen layout. It doesn’t
move when the browser is resized.
Now the “allcontent” is 800 pixels in width, no matter
how you resize the browser. And, because all the other s
are inside “allcontent”, they will also fit into the 800 pixel
space as well. So, the page is basically frozen to 800 pixels.
518 Chapter 12
What’s the state between liquid
and frozen? Jello, of course!
The frozen layout has some benefits, but it also just plain
looks bad when you widen the browser. But we’ve got a fix,
and it’s a common design you’ll see on the Web. This design
is between frozen and liquid, and it has a name to match:
Jello. Jello layouts lock down the width of the content area in
the page, but center it in the browser. It’s actually easier to
change the layout to a jello layout and let you play with it,
than to explain how it behaves, so let’s just do it:
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
This certainly solves the problem of the sidebar
expanding and it looks pretty nice. It is a little
strange when the browser is very wide, though,
because of all the empty space on the right side.
But, we’re not done yet; we’ve got a
little room for improvement.
Rather than having fixed left and right
margins on the “allcontent” , we’re
setting the margins to “auto”.
If you remember, when we talked about giving a content area a width of “auto”, the
browser expanded the content area as much as it needed to. With “auto” margins,
the browser figures out what the correct margins are, but also makes sure the left
and right margins are the same, so that the content is centered.