HTML and CSS Reference
In-Depth Information
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 “all content” <div> is 800 pixels in width, no matter
how you resiz e the browser. And, because all the other <div>s
are inside “al lcontent”, they will fit into the 800-pixel
space as well . So, the page is basically frozen to 800 pixels.
Th is cert ainly so lves the proble m of t he side bar
ex panding , and i t looks pretty nice. It is a li ttle
st range w hen th e brow ser is v ery wid e, thou gh,
be cause o f all t he empt y space on th e right side.
But we' re not d one yet ; we've g ot a
little ro om for improve ment.
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:
Rather than having fixed left a nd right
margins on the “allcontent” <div >, we're
setting the margins to “auto”.
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
Search WWH ::

Custom Search