title: CSS - Sticky footer
body: <p>There seem to be tons of solved problems with this one, but neither of them seem to work for me...</p>
  
  <p>I have created this little jsfiddle to show you: <a href="http://jsfiddle.net/2jn3J/" rel="noreferrer">jsfiddle footer</a></p>
  
  <p>And the CSS:</p>
  
  <pre><code>.footer {
       width:798px;
       border-top: 2px solid #2E181A;
       clear: both;
       padding: 5px 0 0 0;
       background-color: inherit;
       text-align: center;
       bottom:0;
       background-color: #E6D9BD;
       position:relative;
       height: 30px;
       margin: -30px auto 2px auto;
       z-index:30;
   }
  
   .container {
       width: 788px;
       margin: 0px auto 0px auto;
       padding: 0px 0px 30px 0px;
       border:5px solid #2E181A;
       background-color: #E6D9BD;
       min-height: 100%;
       position:relative;
       content: " "; /* 1 */
       display: table; /* 2 */
   }
  
   .contentleft {
       background-color: inherit;
       margin:5px 10px 10px 10px;
       padding:10px 5px 30px 5px;
       float:left;
       overflow: hidden;
       width: 300px;
       display:block;
   }
  
   .contentright {
       background-color: inherit;
       margin:5px 0px 10px 10px;
       border:0px solid #2E181A;
       padding:10px 5px 30px 5px;
       float:left;
       overflow: hidden;
       width: 420px;
       display:block;
   }
  </code></pre>
  
  <p>I have set a top-border in the <code>div.footer</code>, and this should be visible and a little space between the border and the <code>div.container</code>.</p>
  
  <p>Hope you will take a quick look at the code and see whatever I'm doing wrong!</p>