Head First HTML with CSS

Test driving with a tank of jello
Add the two margin properties to your “starbuzz.css” file, and then reload
the page. Now play with the size of the browser. Pretty nice, huh?
Narrow.
Wide.
So if we want our content
in the correct order, we either
have to live with an expanding
sidebar or we have to use a jello
layout? Is there any other way to
do this?
With CSS, there are typically lots of ways to approach a layout, each with their
own strengths and weaknesses. Actually, we’re just about to look at another
common technique for creating a two-column layout that keeps the content in
the correct order, and avoids some of the problems of the liquid layouts. But,
as you’ll see, there are some tradeoffs.
With this new technique we’re not going to float elements at all. Instead we’re
going to use a feature of CSS that allows you to precisely position elements on
the page. It’s called absolute positioning. You can also use absolute positioning
for some nice effects beyond just multi-column layouts, and we’ll look at an
example of that, too.
layout and positioning
To do all this, we’re going to step back to the original XHTML and CSS we
started with in the beginning of this chapter. You can find a fresh copy of these
files in the “chapter12/absolute” folder. Be sure and take another look at these
files so you remember what they originally looked like. Recall that we’ve got
a bunch of s: one for the header, one for main, one for the footer, and
also a sidebar. Also remember that in the original XHTML, the sidebar
is below the main content area, where we’d optimally like to have it.
you are here 519