title: CSS 100 percent height body and element
body: <p>I am having an issue making one of my elements 100% within an overall layout that is 100%.</p>
  
  <p>I have tried different positioning solutions and I either end up with hidden content the floats behind the footer at the bottom, or the content ends up going behind the footer, and carrys on after the footer.</p>
  
  <p>Here is what I have for the page layout.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"&gt;
  
  &lt;head&gt;
  &lt;style&gt;
      *{margin:0}
      html,body{margin:0; padding:0; height:100%}
      .wrapper{position:relative; margin:0 auto -200px; height:auto !important; height:100%; min-height:100%}
      .container{width:930px; margin:0 auto; text-align:left}
      .right{float:right; width:680px; background:#FFF; margin:60px 10px 0 0; padding:0}
      .left{float:left; width:240px}
      .content{padding:10px}
      .footer{position:absolute; width:100%}
      .footer,.push{height:200px}
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
  &lt;div class="container"&gt;
  &lt;div id="left"&gt;
     left
  &lt;/div&gt;
  &lt;div class="right"&gt;
  
  &lt;div class="content"&gt;
      content
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="push"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
      footer
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The layout for the page being 100% height and footer at the bottom works it just the div with the class name content that I would like to be 100% as well and push the footer further down if the content reaches the footer and not disappear.</p>
  
  <p>Any help most appreciated.</p>
  
  <p><a href="http://img686.imageshack.us/img686/7725/screenshotbj.png" rel="noreferrer">http://img686.imageshack.us/img686/7725/screenshotbj.png</a></p>