How to get Outer div to Grow alongside Inner div - html

Question

I have a container div which, inside, has an inner div. I would like it for my outer div to grow (in height) alongside the contents of its inner div. I've set a minimum height, however the size of the outer div never has a height different from the minimum one I have set.
This is the html:
<div id="containerDiv">
<div class="innerDiv">
<div id="header" class="layout">...</div>
<div id="mainMenu" class="layout">...</div>
<div id="content" class="layout">...</div>
<div id="footer" class="layout">...</div>
</div>
</div>
This is the CSS:
#containerDiv {
background-image: url('/Content/images/backgroundimage.png');
min-height: 760px;
width: 100%;
border-radius: 1px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow: auto;
}
.innerDiv{
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: absolute;
background-color: white;
}
This fiddle should help see my problem. The red div should be the same height as the white one. The width is ok, it is supposed to be 100%.
http://jsfiddle.net/arrsoph87/euB8H/
Based on this solution I tried setting the overflow property to auto (in the container), with no luck.
Based on this solution, I tried setting the container's property float, to left. This didn't work either.
I also tried adding right after this line
<div id="footer" class="layout">...</div>
(meaning, right before closing the inner div), to add this line based on another post
<div style="clear:both;"></div>
Also couldn't get this to work. Any suggestions?

Answer 1

Change overflow: auto to overflow: hidden. That oughta work.
#containerDiv {
background-image: url('/Content/images/backgroundimage.png');
min-height: 760px;
width: 100%;
border-radius: 1px;
-webkit-border-radius: 1px;
-o-border-radius: 3px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow: hidden; // <-------
}

Answer 2

This typically happens if your innerDiv is floating right or left. You seem to not have added the class definition of innerDiv.
Usually the solution to this is to add after the end tag of innerDiv (and not before it).

Answer 3

Ok, the problem seemed to be that the position:absolute property of the innerDiv. I changed it to relative and it worked. The following would be the relevant HTML:
<div id="containerDiv">
<div class="innerDiv">
<div id="header" class="layout">HEADER</div>
<div id="mainMenu" class="layout">MAIN MENU</div>
<div id="content" class="layout">CONTENT</div>
<div id="footer" class="layout">FOOTER</div>
</div>
</div>​
And the CSS:
#containerDiv
{
background-image: url('/Content/images/backgroundimage.png');
min-height:760px;
width: 100%;
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 96px 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
overflow:hidden; /*added*/
/* removed overflow:auto; */
}
.innerDiv
{
border-radius: 1px;
-webkit-border-radius: 1px;
box-shadow: 0 0 86px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
position: relative; /*added*/
/*removed position:auto;*/
left:230px; /*added*/
background-color:white;
width: 100px;
}​
I placed it in this new fiddle.
http://jsfiddle.net/arrsoph87/BC5n8/