title: Html container setup
body: <p>I have the following container setup where </p>
  
  <ul>
  <li>the entire page is split in half, left and right </li>
  <li>the left container is split into two separate containers, an upper and a lower one</li>
  </ul>
  
  <p>The lower one will have dynamic content in the future but I used a spacer to keep the layout and added a content container to the lower one.</p>
  
  <p>The problem is that if I apply a <code>margin-top</code> to the content container inside the lower container, the margin gets applied to the lower spacer creating a gap between the upper and lower. I can't wrap my head around this and when I rebuild this in a blank page with just the up and down split in a container it worked fine.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0px;
    padding: 0px;
  }
  
  #left {
    width: 50%;
    height: 100%;
    float: left;
    background-color: #333;
  }
  
  #upper-spacer {
    width: 100%;
    height: 20%;
    background-color: #f00;
  }
  
  #lower-spacer {
    width: 100%;
    height: 80%;
    background-color: #28a87a;
  }
  
  #lower-content {
    width: 90%;
    margin: auto;
    margin-top: 20px;
    height: 80%;
    background-color: #1d77c6;
  }
  
  #right {
    width: 50%;
    height: 100%;
    float: right;
    background-color: #3c3c3c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div id="left"&gt;
      &lt;div id="upper-spacer"&gt;&lt;/div&gt;
      &lt;div id="lower-spacer"&gt;
        &lt;div id="lower-content"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am not only looking for and easy fix but more for a explanation.</p>