title: Extend Faux Column Down to Sticky Footer
body: <p>I'm new to using CSS, and have been reading tutorials and viewing sample codes. Right now, I'm using the faux column method <a href="http://www.code-sucks.com/free-css-templates/respectably-dull/" rel="nofollow">as described by Keith Donegan at Code-Sucks.com</a> and the sticky footer solution <a href="http://www.cssstickyfooter.com/" rel="nofollow">as described by Steve Hatcher</a>. </p>
  
  <p>I've read the similar questions already posted here about extending div tags to the bottom of the page, but they don't appear to work for me. I've set the height and min height to 100% in all of my containing css classes, but it doesn't seem to work.</p>
  
  <p>Furthermore, the current code has a problem where there is no margin when my "wrapper" pushes into my footer. I want a nice 5px margin, but it instead completely disappears.</p>
  
  <p>Below is my CSS. I've taken out a lot of the comments and credits for readability purposes.</p>
  
  <pre><code>* {margin:0;padding:0;} 
  
  html {height: 100%;}
  
  body {
      height: 100%;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
  
  }
  
  #wrapper { 
   margin: auto;
   width: 922px;
   height: 100%;
  
  }
  
  #main {overflow:auto;
      padding-bottom:155px; /* must be same height as the footer */   
      }  
  
  #faux {
   background: #CCCCCC;
   margin-bottom: 5px;
   overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
   width: 100%
   min-height:100%;
  }
  #header {
   color: #333;
   width: 902px;
   padding: 10px;
   height: 100px;
   margin: 0px 0px 5px 0px;
   background: #ABBEBE; 
   position: relative;
  }
  #leftcolumn { 
   display: inline;
   color: #333;
   margin: 10px;
   padding: 0px;
   width: 195px;
   float: left;
   min-height: 100%;
  }
  #rightcolumn { 
   float: right;
   color: #333;
   margin: 10px;
   padding: 0px;
   width: 683px;
   display: inline;
   position: relative;
   min-height: 100%;
   }
  
  
  #footer {position: relative;
   margin: 5px auto;
   width: 902px;
      margin-top: -155px; /* negative value of footer height */
      height: 130px;
      clear:both;
      background: #ABBEBE;
      color: #333;
      padding: 10px;
      } 
  
  #.clear { clear: both; background: none; }
  </code></pre>
  
  <p>My html is as follows</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"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Faux Column CSS Layouts - 2 Column - faux-1-2-col&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="main.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;!-- Begin Wrapper --&gt;
     &lt;div id="wrapper"&gt;
          &lt;div id="main"&gt;
           &lt;!-- Begin Header --&gt;
           &lt;div id="header"&gt;
                 This is the Header        
           &lt;/div&gt;
           &lt;!-- End Header --&gt;
           &lt;!-- Begin Faux Columns --&gt;
           &lt;div id="faux"&gt;
                 &lt;!-- Begin Left Column --&gt;
                 &lt;div id="leftcolumn"&gt;
                 &lt;/div&gt;
                 &lt;!-- End Left Column --&gt;
                 &lt;!-- Begin Right Column --&gt;
                 &lt;div id="rightcolumn"&gt;
                       &lt;h1&gt;Faux Column CSS Layouts&lt;/h1&gt;    
                       &lt;p&gt;
                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. &lt;/p&gt;
  
                          &lt;p&gt; Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.            
                        &lt;/p&gt;
                 &lt;div class="clear"&gt;&lt;/div&gt;
                 &lt;/div&gt;
                 &lt;!-- End Right Column --&gt;
                 &lt;div class="clear"&gt;&lt;/div&gt;
           &lt;/div&gt;    
           &lt;!-- End Faux Columns --&gt;
           &lt;/div&gt;
     &lt;/div&gt;
     &lt;!-- End Wrapper --&gt;
    &lt;!-- Begin Footer --&gt;
           &lt;div id="footer"&gt;      
                 This is the Footer       
           &lt;/div&gt;
           &lt;!-- End Footer --&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be appreciated.</p>