@charset "UTF-8"; /* CSS Document */ body{background: #333333; font-family: "Courier New", Courier, monospace; font-weight:100; line-height: 100%} ul{list-style:none; padding:0px;} li{list-style:none; list-style:none; } #container{ margin-right:auto; width:500px; margin-left:auto; } #updates{ margin-right:auto; width:500px; margin-left:auto; text-decoration:none; color:#CC3300; font-size:12px; line-height:90%; } #updates { clear:both; margin-right:auto; width:499px; color:#00FFCC; font-size:12px; margin-top:20px; } #updates a:link{ text-decoration:none; color:#FFFFFF;} #updates a:hover{ text-decoration:line-through; color:#FFFFFF; } #updates a:visited { text-decoration:none; color:#9966FF;} #nav { clear:both; margin-right:auto; width:499px; color:#FFFFFF; font-size:12px; margin-top:20px; } #nav a:link{ text-decoration:none; color:#FFFFFF;} #nav a:hover{ text-decoration:line-through; color:#FFFFFF; } #nav a:visited { text-decoration:none; color:#FFFFFF;} #images { clear:both; margin-right:auto; width:499px; color:#CC3300; font-size:12px; margin-top:20px;} #images a:link{ text-decoration:none; color:#CC99FF;} #images a:hover{ text-decoration:line-through; color:#CC99FF; } #images a:visited { text-decoration:none; color:#CC99FF;} #divider {width:499px; margin-right:auto; margin-top: 10px;} #greentext { color:#CC0011; font-size:18px;} #engage { color:#33CC33;font-family: "Courier New", Courier, monospace; font-weight:100; font-size:18px;} #engage a:link { text-decoration:none; color:#CC99FF;} #engage a:hover { text-decoration:line-through; color:#CC99FF; } #engage a:visited { text-decoration:none; color:#CC99FF;} # numbers roll {clear:both; margin-right:auto; width:499px; color:#FFFFFF; font-size:13px; } #nav-one { position:absolute; top: 6em; left:0; width:15em; background: #f5f5f5; color: maroon; border:0px solid #c0c0c0; text-align: right; } #nav-one p {padding:0.5em;} .nav-two { margin-left: 0.5em; margin-right: 0.5em; background: #708090; color:#fff; margin-top:10px; } .nav-three { margin-left: 0.5em; margin-right: 0.5em; background: #008b8b; color:#fff; margin-top:10px; } #footer { width:100%; text-align:center; margin-top:20px; padding: 0.5em; color:#009; background:#ccc; border:3px solid #708090; } p.c {text-align: center;} .buttonlink2 { padding: 4px; border: outset 2px Menu; color: #224059; background: #f0f0f0; text-decoration: none; } /*]]>*/

Exploring CSS Liquid Layouts: 2-Column Normal Page Flow Fixed Navigation

There are many ways using CSS layouts to create multiple column liquid layouts that include a header and footer. You can float divs either left or right, within or outside of the main content.

This is a paragraph contained in div ID main.

This is a paragraph contained in div ID main.