CSS Liquid Layout: Two Column Left Navigation Header Footer [demo 2]

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.

  <?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS Liquid Layout: Two Column Left Navigation [# 2]</title>
  <style type="text/css">
  /*<![CDATA[*/
  body {
  margin:0;
  padding:0;
  color:#000;
  background: #f5f5f5;
  font: 0.8em Verdana, arial, sans-serif;
  }
  #header {
  top:0;
  left:0;
  height:5em;
  color:#009;
  background:#ccc;
  border:3px solid #708090;
  }
  h1 {font-size: 1.8em; padding:0.2em 0.3em;}
  h2 {font-size: 1.3em; color: #8b0000;}
  #main {
  margin-left:15em;
  padding:0 3em 1em;
  background: #eaeaea;
  border:3px solid #708090;
  }
  #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;
  }
  /*]]>*/
  </style>
  </head>

  <body>
  <div id="header">
  <h1>CSS Layout Test 2-Column Header Footer</h1>
  </div>

  <div id="main">
  <h2>Exploring CSS Liquid Layouts: 2-Column Normal Page Flow Fixed Navigation</h2>

  <p>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.</p>

  <p>This is a paragraph contained in div ID main.</p>

  <p>This is a paragraph contained in div ID main.</p>
  </div>

  <div id="nav-one">
  <p>This is the positioned left column Here it includes text and two nested text-boxes. It is a versatile configuration that can be used for text highlights and general navigation.</p>

  <div class="nav-two">
  <p>This is div class nav-two</p>
  </div>

  <div class="nav-three">
  <p>This id div class nav-three</p>
  </div>
  </div>

  <div id="footer">
  <p>This is div ID footer</p>

  <p>This is a footer paragraph</p>
  </div>
  </body>
  </html>

Copy and paste the Two Column Header Footer CSS layout code from the teaxtarea to your HTML editor.

Use as is, or experiment with the various CSS style declarations to see the effects of positioning.

This div adjusts the footer div position depending on the content within. The left navigation div uses position: absolute and will not affect the footer position.

CSS Tutorials ::: CSS 100% Height Page One ::: CSS 3-Column Liquid Maxheight 02 ::: CSS Menus Unordered Lists