Head First HTML with CSS

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. There are a couple of layouts that work like this,
but let’s start with 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 XHTML, and one new rule in your CSS.
XHTML Changes
In your XHTML you’re going to add a new element with the id
“allcontent”. Like its name suggests, this is going to go around all the
content in your page. So place the opening tag before the header
and the closing tag below the footer .
CSS Changes
... rest of the XHTML goes here ...
This closes the footer .
Now we’re going to use this to constrain the size of
all the elements and content in the “allcontent” to
a fixed width of 800 pixels. Here’s the CSS rule to do that:
#allcontent {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
}
Add a new with the id of “allcontent”
around all the other elements in the .
layout and positioning
We’re going to set the width of “allcontent” to
800 pixels. This will have the effect of constraining
everything in it to fit within 800 pixels.
While we’re at it, since this is the first time
we’re styling this , let’s add some padding
and give it its own background color. You’ll see
this helps to tie the whole page together.
The outer “allcontent” is always 800 pixels, even when the browser is resized, so we’ve
effectively frozen the to the page, along with everything inside it.
you are here 517