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;
}
