Advanced CSS: Page Layout in CSS - Web Publishing with HTML and CSS - page 395

6. Then reposition the footer with these rules:
#footer { position: absolute;
top: 1em; right: 1em;
width: 10em;
padding: 0; }
#footer p { padding: 0.5em; }

7. Reload the page. The #footer is now no longer a footer, but a third column on the
right side of the page.

▲

The Floated Columns Layout Technique
You can also lay out a web page by using the float property rather than positioning
properties. This method is a little bit more complex but is favored by some designers
who prefer the versatility. In addition, floated columns can be written with fewer <div>
tags and in some cases deal better with side columns that are shorter than the main text.

Listing 13.5 is a style sheet demonstrating how you can float entire columns on a
page with CSS. This is a replacement for the dunbar-layout-13.2.css style sheet in
Listing 13.2. The new style sheet places the menu bar on the left instead of the right,
just for variety's sake—there's nothing inherently left-biased about floated columns (or
right-biased about positioning).

LISTING 13.5 Float-Based Layouts in CSS

/* dunbar-float-13.5.css */

body { margin: 0; padding: 0; }
#sitenav ol { padding: 0; margin: 0;
display: inline; }
#sitenav li { display: inline; padding-left: 1em;
margin-left: 1em; border-left: 1px
solid black; }
#sitenav li:first-child
{ padding-left: 0; border-left: none;
margin-left: 0; }

13

/* This is what positions the sidebar: */
#main { padding: 0 2em 2em 12em; }
#content { float: left; }
#sidebar { float: left; width: 10em;
position: relative;
right: 11em; top: 1em;
margin-left: -100%; }
#sidebar ol { margin: 0 0 1em 0; }