title: How can I stretch my navigation and content area height to 100% in CSS?
body: <p>If you go to <a href="http://ffmages.com/final-fantasy-tactics" rel="nofollow">http://ffmages.com/final-fantasy-tactics</a> (as an example), you will notice that the footer section shows behind both the navigation and content areas. I would like to make it so that the nav and content stretches at 100% height and the footer stays at the bottom of the screen.</p>
  
  <p>The following is the CSS I am using for my header, menu, content, and footer sections:</p>
  
  <pre><code>#container {
      width: 1000px;
      height: 100%;
      background-image: url(/images/background.gif); 
      margin: 0 auto;
  }
  
  #header {
      width: 1000px; 
      height: 98px;
      background-image: url(/images/header.jpg);
      background-repeat: no-repeat;
  }
  
  #primary {
      float: left; 
      width: 167px;
      height: 798px;
      text-align: left;
      padding-bottom: 14px;
      background-image: url(/images/nav-bg.jpg); 
      background-repeat: no-repeat;
      background-color: #FFFFFF;
      margin: 0px;
      border-top: 1px #000000 solid;
      border-left: 1px #000000 solid;
      border-right: 1px #000000 solid;
  }
  
  #content {
      float: right;
      width: 810px; 
      height: 100%;
      text-align: left;
      background-color: #FFFFFF; 
      border-top: 1px #000000 solid; 
      border-right: 1px #000000 solid; 
      padding: 10px;
      line-height: 1.5em; 
      margin: 0px;
  }
  
  #footer {
      clear: both;
      width: 998px;
      height: 18px;
      font-size: 7pt;
      color: #FFFFFF;
      text-align: center;
      background-color: #07162A;
      background-image: url(/images/footer-bg.jpg);
      border-top: 1px #000000 solid;
      border-left: 1px #000000 solid;
      border-right: 1px #000000 solid;
      border-bottom: 1px #000000 solid;
      padding-top: 6px;
      padding-bottom: 1px;
  }
  </code></pre>
  
  <p>Any help is appreciated. Thank you!</p>