No scrollbar when using overflow: auto and div heights

Question

This is a very simple question, but my brain does not work, and several attempts to fix it have been fruitless. I use overflow: auto in the parent so that it stretches to the height of its child <div> s. Usually this works for me, this time it doesn’t work: instead, it hides the extra height and places it in the scroll bar so that I can scroll down. This is not the behavior I want. Here's the HTML:

 <div id="homecasestudy"> <h2 class="homecasestudyheading">Case Study</h2> <div id="homecasestudyleft"><h3>Lorem</h3><p>Ipsum</p></div> <div id="homecasestudyright"> <div id="casestudyfrontpic"><img src="uploads/casestudies/1/casestudyex1.jpg" border="0" /></div><div id="paperclip"></div> <div id="homecasestudyquote">Quote</div> </div> </div><!-- homecasestudy --> 

And CSS:

 #homecasestudy { width:389px; min-height:257px; background:url(../images/casestudybgtop.jpg) #E5E6E7 no-repeat; padding:13px 0 0 13px; position:relative; overflow:auto; } #homecasestudyleft { width:200px; min-height:130px; float:left; margin:20px 0 0 10px; } h2.homecasestudyheading { width:366px; height:25px; background:url(../images/casestudytitlebg.jpg) no-repeat; color:#005BA7; margin:0; padding:6px 0 0 8px; font-size:16px; } #homecasestudyright { float:left; min-height:180px; } #casestudyfrontpic { width:154px; height:160px; background:url(../images/casestudyfrontpic.png) no-repeat; padding:6px 0 0 9px; position:absolute; top:13px; right:8px; } #paperclip { width:33px; height:58px; background:url(../images/paperclip.png) no-repeat; position:absolute; top:1px; right:125px; } #homecasestudyquote { color:#6E7071; font-size:14px; font-weight:bold; width:147px; position:absolute; top:180px; right:10px; margin:0; padding:0; } 

Answer 1

Overflow: auto will not help you here how to clear your floats. #homecasestudy expands to contain children, but only to the borders of the page.

You can try using only the CSS method to clear the div.

 #homecasestudy:after { content:'.'; clear: both; display: block; height: 0px; text-indent: -999999em; } 

This creates a block-level element after everything else in #homecasestudy, uses it to clear the floats, then does some resizing to make sure the style rule doesn't add a space.

This trick will not work in earlier versions of IE. In such cases, you should add zoom: 1 to the #homecasestudy rule instead of overflow: auto .

If your quote is long, it will still overflow the borders of the window, because it is absolutely positioned - there is no good way to “contain” absolutely positioned elements. If the quote should be contained, try to find a way to do this with float.

See a working example here. In this example, I removed the “absolute” from the quote field. http://dabblet.com/gist/2116495

Answer 2

In general, if you want the container to stretch to fit its contents, do not set an overflow rule. When you want a container to stretch, you do not set the height for it, and without height the overflow property does nothing.

I suggest you remove the min-height rule from #homecasestudy . This will allow the content to set the height of the container and you will not see scrollbars. There are no rules for height or overflow .