title: Why do Chrome and Firefox behave differently on margin?
body: <p>I am trying to understand a difference of behavior between Chrome and Firefox. I have published the <a href="http://codepen.io/Eturcim/pen/XbJodY" rel="nofollow">following CodePen</a> to illustrate the point.</p>
  
  <p>With Firefox, the footer element sticks to the bottom of the wrapper div thanks to the <code>margin-top: -50px</code> applied on it. This is what I am expecting.</p>
  
  <p>With Chrome (and IE), the <code>margin-bottom</code> of the p element <em>pushes down</em> the footer, making it overflow. Why is that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      margin: 0px;
      height: 100%
  }
  header {
      background-color: dodgerblue;
      opacity: 0.5;
  }
  #wrapper {
      background-color: tomato;
      position: relative;
      min-height: 100%;
  }
   
  #container p {
      background-color: lightgreen;
      width: 500px;
      /*margin-bottom: 0px;*/
  }
  footer {
      height: 50px;
      background-color: dodgerblue;
      margin-top: -50px;
      opacity: 0.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;.&lt;/header&gt;
          &lt;div id="container"&gt;
              &lt;p&gt;.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>