<?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:4em;
  padding:5px;
  color:#c0b077;
  background: #300b07;
  font: 12px Times New Roman, arial, sans-serif;
  }
  #header {
  top:0;
  left:0;
  height:5em;
  color:#300b07;
  background:#300b07;
  border:0px solid #708090;
  }
  h1 {font-size: 1.8em; padding:0.2em 0.3em;}
  h2 {font-size: 1.3em; color: #8b0000;}
  #main {
  margin-left:15em;
  padding:0em 0em 0em;
  background: #ffffff;
  border:10px solid #c0b077;
  }
  #nav-one {
  position:absolute;
  top: 6em;
  left:2em;
  width:10em;
  background: #edeac5;
  color: 000000;
  border:10px solid #c0b077;
  text-align: left;
  }
  #nav-one p {padding:0.5em;}
  .nav-two {
  margin-left: 0.5em;
  margin-right: 0.5em;
  background: #ffffff;
  color:#fff;
  margin-top:10px;
  }
  .nav-three {
  margin-left: 0.5em;
  margin-right: 0.5em;
  background: #ffffff;
  color:#fff;
  margin-top:10px;
  }
  #footer {
  width:100%;
  text-align:center;
  margin-top:30px;
  padding: 1em;
  color:#c0b077;
  background:#300b07;
  border:0px solid #708090;
  }
  p.c {text-align: center;}
  .buttonlink2 {
  padding: 4px;
  border: outset 2px Menu;
  color: #c0b077;
  background: #c0b077;
  text-decoration: none;
  }

  a:hover {background-color:#c0b077;
  color:#ffffff}

  /*]]>*/
  </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>
