title: Multiple elements, padding and margins inside display: table-cell extends outside parent
body: <p>I am using <code>display: table-cell</code> so that I can easily do <code>height:100%</code> the child elements inside to get 100% height.</p>
  
  <p>The problem is that when I have multiple elements inside or padding or margins, the parent does not stretch and instead the contents poke through. Putting a <code>overflow: hidden</code> will not work as I need the children to fit inside the parent properly.</p>
  
  <p>Mark up:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="subcontainer"&gt;
          &lt;h4&gt;title&lt;/h4&gt;
          &lt;div class="menu"&gt;
              &lt;p&gt;test&lt;/p&gt;
              &lt;p&gt;test&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;p&gt;content&lt;/p&gt;
              &lt;p&gt;content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>p{
      padding:0;
      margin:0;
  }
  
  html{
      height: 100%;
      overflow-y: scroll;
      background: white;
  }
  
  body{
      height: 100%;
      margin: 0;
      padding: 0;
      background: red;
  }
  
  .container{
      height: 100%;
      display: table;
      margin: 0;
      padding: 0;
  }
  
  .subcontainer{
      display: table-cell !important;
      height: 100%;
  }
  
  h4{
    padding: 0;
    padding-bottom: 5px;
    background: blue;
    margin: 0;
    border-bottom: 1px solid black;
    margin-bottom: 5px;
  }
  
  .menu, .content{
      background: green;
      height: 100%;
      display: inline-block;
      float:left;
      width: 200px;
      padding: 20px;
  }
  
  .content{
      background: purple;
      width: 400px;
  }
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/ZQFrM/" rel="nofollow">http://jsfiddle.net/ZQFrM/</a></p>
  
  <p>The poking through is due to increased height inside caused by the following:</p>
  
  <ul>
  <li>The existence of the <code>h4</code> on top of the other elements.</li>
  <li>Padding and margin on h4.</li>
  <li>Padding on <code>menu</code> and <code>content</code>.</li>
  </ul>
  
  <p>What can be done to resolve this problem? I definitely want to use the <code>display: table-cell</code> as I need the children to be able to stretch vertically to fill the parent.</p>