HTML and CSS Reference
In-Depth Information
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?
Na
rrow
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 its
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 multicolumn layouts, and we'll look at an
example of that, too.
To do all this, we're going to step back to the original HTML and CSS we
started with in the beginning of this chapter. You can find a fresh copy of these
files in the “chapter11/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
<div>
s: one for the header, one for main, one for the footer, and
also a sidebar. Also remember that in the original HTML, the sidebar
<div>
is
below the main content area, where we'd optimally like to have it.
