title: Calculating margin-top value to occupy remaining height in fluid design
body: <p>Basically, the container has both fluid height and width. Kindly consider the following:</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;span class="header"&gt;Hello!&lt;/span&gt;
     &lt;div class="box"&gt;&lt;/div&gt;
     &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both of the <code>box</code> divs take say 40% height each, assume I apply 15% height for the <code>span</code> element and the remaining 5% for its <code>margin-top</code> value. As expected it will not sum up to 100% of the <code>container</code> height since 
  <code>margin-top</code> is calculated based on the width as far as I know. How do I calculate the <code>margin-top</code> percentage value in this case so all elements including the margin would sum up to the full height of the <code>container</code>? here's my CSS Code, thanks in advance.</p>
  
  <pre><code>.container {
      height: 80%;
      width: 80%;
  }
  
  .header {
      height: 15%;
      display: inline-block;
      margin-top: 5%;         /*how to calculate this correctly*/   
  }
  
  .box {
      height: 40%;
  }
  </code></pre>