title: Position a footer div outside of the container
body: <p>How can I get my footer to sit on the bottom of the page outside of the container?  The template is based on the boilerplate.</p>
  
  <p>What CSS do I need to use to make it sit at the bottom?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;/div&gt;&lt;!-- end of container --&gt;
  
      &lt;div clear="clear"&gt;&lt;/div&gt;
              &lt;div id="footer" class="w960"&gt;
          &lt;div id="footerHolder"&gt;
              &lt;div class="foot left"&gt;&lt;/div&gt;
  
              &lt;!--
              &lt;div class="foot right"&gt;
                  FOLLOW US:
                  &lt;div id="social"&gt;
                      &lt;a href=""&gt;&lt;div id="fb" class="socialIcon"&gt;&lt;/div&gt;&lt;/a&gt;
                      &lt;a href=""&gt;&lt;div id="tw" class="socialIcon"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#container{width:960px;margin:0px auto 40px auto;}
  #footer{width:100%;clear:both; height:66px;background:#2d2d2f;}
  #footerHolder{width:960px;margin:auto;}
  </code></pre>