ptg16476052Laying Out the Page 43315
- Next, move the footer section. Even though it is semantically the footer, there’s noth-
ing magical about that name that means it needs to be at the bottom of the page. Place
it on the right side, where the sidebar used to be located. First clear some space:
#main { padding: 0 12em 2em 12em; } - Then reposition the fo oter with these rules:
footer { position: absolute;
top: 1em; right: 1em;
width: 10em;
padding: 0; }
footer p { padding: 0.5em; } - 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 deal better with side columns that are
shorter than the main text in some cases.
Listing 15.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-15.2.css style sheet in Listing
15.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 15.5 Float-Based Layouts in CSS
/ dunbar-float-15.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; }
/ This is what positions the sidebar: /
#main { padding: 0 2em 2em 12em; }
#content { float: left; }
#sidebar { float: left; width: 10em;
position: relative;
▼▲