HTML and CSS Reference
In-Depth Information
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).
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; }
/* 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; }
Search WWH ::

Custom Search