CSS Parent DIV Overflow

css, css-float, html, overflow, parent

Solution

Try adding:

#container { min-height: 100%; }

after height 100%. You may also want to try:

#container { overflow: auto; }

Problem

I have a problem with a website I'm putting together. I have a simple div layout. Which is as follows: ``` <body> <div id="Container"> <div id="Logo"></div> <div id="Banner"> <div id="Nav"></div> </div> <div id="Content"> </div> <div id="footer">Footer</div> </div> </body>​ ``` And my CSS is as follows: ``` @charset "utf-8"; /* CSS Document */ html, body { height:100%; padding:0; margin:0; background-image:url(../layout.img/background_gradient.gif); background-repeat:repeat-x; } #Container { height:100%; width:950px; margin:auto; background-color:#FFFFFF; border-left:1px solid #333333; border-right:1px solid #333333; } #Logo { width:160px; height:160px; float:right; } #Banner { width:100%; height:160px; } #Nav { width:550px; height:33px; position:relative; top:100px; left:50px; } #Content { clear:both; } ``` And finally the result can be seen here: http://jsfiddle.net/mczMS/ As you can see the 'container' div doesn't stretch out with the content as you scroll down the page. I know this is probably something stupidly simple but I'm running short of brain power today. Haha.

Original source