title: CSS Sticky Footer with Margin-Top
body: <p>I have found a lot of solutions for sticky footer here on Stack Overflow and it works for me. However, I need to keep a 60px distance between my "content div" and my "footer div". In all the solutions I found so far, if I set <code>margin-top: 60px</code> for my "footer div" it didn't work.</p>
  
  <p>A solution I found:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="body"&gt;
          &lt;div id="teste"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  html,
  body {
    margin:0;
    padding:0;
    height:100%;
  }
  
  #container {
    min-height:100%;
    position:relative;
  }
  
  #teste {
    background: red;
    height: 500px;
  }
  
  #body {
    padding:10px;
    padding-bottom:60px;   /* Height of the footer */   
  }
  
  #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
    margin-top: 60px; &lt;---- this didn't work
  }
  </code></pre>