title: CSS: content area has to take 100% height
body: <p>this is driving me crazy... I'm building the page at <a href="http://one29090testvdscom.accounts.combell.net/nl" rel="nofollow">http://one29090testvdscom.accounts.combell.net/nl</a>. It's a page that has a header, left menu, content and footer. Width is fixed at 960px, centered horizontally. This all works. But then, if there is little text in the content, I would like that the gray content area always takes the available screen height, so that the footer is down the page. </p>
  
  <p>The page looks like:</p>
  
  <pre><code>  &lt;body&gt;
  
      &lt;!-- Centered container that contains site --&gt;
      &lt;div id="centeredcontainer"&gt;            
          &lt;!-- Area with header --&gt;
          &lt;div id="header"&gt;                
              header here                              
          &lt;/div&gt;            
          &lt;!-- Area that contains main menu on the left and content on the right --&gt;
          &lt;div id="mainmenuandcontent"&gt;
              &lt;!-- Main menu on the left --&gt;
              &lt;div id="mainmenu"&gt;
                  main menu here                   
              &lt;/div&gt;
              &lt;!-- Content on the right --&gt;   
              &lt;div id="content"&gt;
                   body here
              &lt;/div&gt;                
              &lt;!-- Clears the floats so that next elements can use margins normally --&gt;
              &lt;div class="clearer"&gt;&lt;/div&gt;
              &lt;!-- Red line under content --&gt;
              &lt;div id="RedLineUnderContent"&gt;&lt;/div&gt;
          &lt;/div&gt;                         
          &lt;!-- Area with languages --&gt;
          &lt;div id="languages"&gt;
            footer here           
          &lt;/div&gt;                       
      &lt;/div&gt;            
  &lt;/body&gt;
  </code></pre>
  
  <p>And the relevant CSS is:</p>
  
  <pre><code>body
  {
      font-size: 12px;
      font-family:Century Gothic,Helvetica,Verdana,Arial,sans-serif; 
      line-height:1.5em;      
      margin: 0; 
      padding: 0;   
      background-color: Black;
  }
  
  #centeredcontainer  
  {
      width: 960px;    
      margin-left: auto ;
      margin-right: auto ;
  }
  
  #header
  {
      margin-bottom: 20px; 
      margin-top:20px;  
  }
  
  #mainmenuandcontent
  {  
      width: 960px;
      clear: both;       
      position: relative;    
  }
  
  #mainmenu
  {        
      float: left;   
      width:180px; 
      padding:10px;
  }
  
  #content
  {
      float: left;
      background-color: #403F3F;        
      width: 760px; 
      min-height: 400px;
      color:White;
  }
  
  #RedLineUnderContent
  {
      height: 20px;
      background: #A10C10;
      margin-left: 200px; 
  }
  
  #languages
  {        
      margin-top: 10px;   
      margin-left: 200px; 
      margin-bottom:20px;  
      text-transform:uppercase;  
  }
  
  .clearer
  {
      clear:both;
  }
  </code></pre>