Multiple elements, padding and margins inside display: table-cell extends outside parent - css

Question

I am using display: table-cell so that I can easily do height:100% the child elements inside to get 100% height.
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 overflow: hidden will not work as I need the children to fit inside the parent properly.
Mark up:
<div class="container">
<div class="subcontainer">
<h4>title</h4>
<div class="menu">
<p>test</p>
<p>test</p>
</div>
<div class="content">
<p>content</p>
<p>content</p>
</div>
</div>
</div>
CSS:
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;
}
Fiddle: http://jsfiddle.net/ZQFrM/
The poking through is due to increased height inside caused by the following:
The existence of the h4 on top of the other elements.
Padding and margin on h4.
Padding on menu and content.
What can be done to resolve this problem? I definitely want to use the display: table-cell as I need the children to be able to stretch vertically to fill the parent.

Answer 1

you have to remove the float:left and display:inline-block from '.menu, .content' also you have to apply a display:table-cell. So both div can be align horizontally.
Here is the Code http://jsfiddle.net/kheema/ZBLY7/7/
Here is the CSS..
p{
padding:0;
padding:0;
}
body{
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;
}
.menu, .content{
background: green;
height: 100%;
/*display: inline-block;
float:left;*/
display: table-cell;
width: 200px;
}
.content{
background: purple;
width: 400px;
}