Head First HTML with CSS

One tradeoff you can make to fix the footer
To try this solution, just give the footer the same right margin size
as the main content area, like this:
#footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px 330px 10px 10px;
font-size: 90%;
}
If you save this and reload your page, you’ll see that the footer is
now under the main content area only, and never creeps up under
the sidebar. Is this optimal? No, but it’s also not bad. And, as we’ve
said, doing CSS layout is a bit of an art. To do layout, you need
to experiment, explore, and keep an eye on the layouts others are
creating with CSS (you’ll find some references for good CSS hangouts
at the end of the chapter).
So this is all great,
but what am I supposed
to do? Use a liquid or jello
design? Use float or absolute
positioning?
layout and positioning
This solution trades having the footer
under just the main content for having a
footer under the entire page, to keep it
from creeping up under the sidebar.
In terms of whether you want your layout to be liquid or frozen or
jello, that really is a matter of deciding what works best for your
pages. For some pages, a fixed content area size with expandable
margins works great, and in fact can be more readable on wide
browsers. For other uses, you might want to use as much of the
browser as you can. So, decide what works best for you.
Once you’ve decided, you still need to figure out which method
you’re going to use to create your pages (float? absolute? some
combination?). You’ve already learned the basics, so now it is
time to start exploring, as there are many other approaches out
there, and new ones being created every day. The techniques
you’ve learned in this chapter are often used as the basis for more
sophisticated designs.
You should know that, in general, using float is considered the
most flexible solution for multi-column layouts. Just keep in
mind, you may have to be careful in the order of your content,
depending on the design.
you are here 527