title: 2 columns layout with a sticky footer
body: <p>I am having trouble getting my 2 columns layout renders correctly with a footer to stick to the bottom of the page. I have followed all the usual advice but my columns seems to expand beyond it's container div, which consequently pushes the footer off the bottom of the page.</p>
  
  <p>my last attempt was to display the columns container as a table!!</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;style&gt;
              html, body{
                  margin:0;
                  height: 100%;
                  padding: 0;
                  border: 0;
                  overflow:inherit; /* triggers 100% height in Opera 9.5 */   
                  font-family: proxima-nova, 'Proxima Nova', gotham, 'helvetica neue', helvetica, arial, sans-serif, sans;
              }
  
              body{  
                  background-color: burlywood;
              }
  
              #wrapper
              {
                  background-color: #FFFFFF;
                  min-height:100%; /* gives layout 100% height */
                  width: 980px;
                  margin:0 auto;
                  margin-top: -105px; /* must equals the footer's height' */
              }
  
              * html #wrapper { 
                  height:100%; /* IE6 treats height as min-height */
              }
  
              div.margin{
                  width: 920px;  /* + 2*30(the padding) */
                  margin-right:auto;
                  margin-left:auto;
                  padding: 0px 30px 0px 30px;
              }
  
              div.header{
                  height: 60px; 
                  background-color:cornflowerblue;
              }
  
              div.footer{
                  position: relative;
                  clear:both;
                  height: 105px; 
                  background-color:#4E8084;
              }
  
             div.body_content{
                  display: table; 
                  background-color: red;
                  height: 100%;
              }
  
              div.leftSide{
                  width:25%;
                  background-color: #F4F4F4;
                  display: table-cell; 
              }
  
              div.rightSide{
                  width: 70%;
                  padding: 20px;
                  background-color: #e8e7e7;
                  display: table-cell; 
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrapper"&gt;
              &lt;!-- Fixing wrapper div. the height must equal the footer's height--&gt;
              &lt;div style="height: 105px;"&gt;&lt;/div&gt;
  
              &lt;div class="header margin"&gt;
                  Welcome
              &lt;/div&gt;
              &lt;div class="body_content" style="clear: both;"&gt;
                  &lt;div class="leftSide"&gt;
                      &lt;h2&gt;Settings&lt;/h2&gt;
                      &lt;a href="#" id="personalButton" class="current"&gt;Personal&lt;/a&gt;
                      &lt;a href="#" id="securityButton"&gt;Security&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="rightSide"&gt;
                      &lt;h3&gt;Title&lt;/h3&gt;
                      &lt;a class="m-btn blue-stripe"&gt;Save Changes&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- end #wrapper --&gt;
          &lt;div class="footer margin" &gt;
              &lt;span class="footer_links"&gt;
                  something
              &lt;/span&gt;  
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>