title: CSS footer doesn't stick to the bottom of the page
body: <p>I'm having some difficulties in setting up a sticky footer in my css layout. I've been trying to go with the idea from <a href="http://www.cssstickyfooter.com/" rel="noreferrer">http://www.cssstickyfooter.com/</a> but the footer doesn't stay at the bottom of the page if the content in the divs isn't high enough.</p>
  
  <p>The css file:</p>
  
  <pre><code>* {
   margin:0;
   padding:0;
   } 
  
  body {
   height:100%; 
   margin:0px; 
   padding:0px;
   }
  
  #wrap {
   min-height: 100%;
   }
  
  #container {
   overflow:auto;
   padding-bottom: 150px;
   text-align:left;
   width:800px;
   margin:auto;
   }
  
  #header {
   height:240px; 
   margin-top:20px;
  }
  
  #navigation {
   float:left; 
   width:800px; 
   margin-top:20px;
  }
  
  #content-container {
   float:left;
   width: 800px;
  }
  
  #left {
   clear:left; 
   float:left: 
   width:480px; 
   height: auto;
   margin: 20px 0px 20px 0px;
   padding: 20px 10px 20px 10px;
  }
  
  #right {
   float:right; 
   width:275px; 
   height:auto;
   margin: 20px 0px 20px 0px;
   padding: 20px 10px 20px 10px; 
  }
  
  #footer {
   position: relative;
   clear:both;
   height:150px;
   margin-top: -150px;
  }
  
  #columns {
   width:800px;
   height:150px;
   margin:auto;
  }
  
  #colleft {
   float:left;
   width:400px;
   height:150px;
  }
  
  #colright {
   float:right;
   position:relative;
   width:260px;
   height:150px;
  }
  </code></pre>
  
  <p>The html file:</p>
  
  <pre><code>&lt;div id="wrap"&gt;
  
      &lt;div id="container"&gt;
  
          &lt;div id="header"&gt;&lt;/div&gt;
  
          &lt;div id="navigation"&gt;
  
              &lt;div id="lang"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;div id="content-container"&gt;
  
              &lt;div id="left"&gt;&lt;/div&gt;
  
              &lt;div id="right"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
  
          &lt;div id="columns"&gt;
  
              &lt;div id="colleft"&gt;&lt;/div&gt;
  
              &lt;div id="colright"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>