HTML and CSS Reference
In-Depth Information
Liquid and frozen designs
All the designs we've been playing with so far are called
liquid layouts
because they expand to fill whatever width we resize the browser to.
These layouts are useful because, by expanding, they fill the space
available and allow users to make good use of their screen space.
Sometimes, however, it is more important to have your layout locked
down so that when a user resizes the screen, your design still looks as it
should. These are called
frozen layouts
. Frozen layouts lock the elements
down, frozen to the page, so they can't move at all, and so we avoid a lot
of issues that are caused by the window expanding. Let's give a frozen
layout a try.
Going from your current page to a frozen page only requires one addition to
your HTML, and one new rule in your CSS.
HTML changes
In your HTML you're going to add a new
<div>
element with the id
“allcontent”. Like its name suggests, this
<div>
is going to go around all the
content in your page. So place the opening
<div>
tag before the header
<div>
and the closing tag below the footer
<div>
.
<body>
<div id="allcontent">
<div id="header">
...rest of the HTML goes here...
</div>
</div>
</body>
This <di
v> closes
the foo
ter <div
>.
CSS changes
Now we're going to use this
<div>
to constrain the size of all the elements
and content in the “allcontent”
<div>
to a fixed width of 800 pixels.
Here's the CSS rule to do that:
We
' re
g o i n g
to
s e t
t h e
w i d t
h o
f “ a
l l c o n
t e n t
” to
8 0
0 p
i x e l
s . Th
i s w
i l l h
a ve
t h e
e ffe
ct o
f c o
n st r
a i n i n
g
e v
e r y t
h i n g
i n i
t to
f it
w it
h i n 8
0 0
pi x e
l s .
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
}
The outer “allcontent” <div> is alw
ays 800 pixels, even when the browser is resized, so we've
effectively frozen the <div> to th
e page, along with everything inside it.
