HTML and CSS Reference
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.
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> .
...rest of the HTML goes here...
This <di v> closes the foo ter <div >.
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 .
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.