No scrollbar when using overflow:auto and div heights

Question

This is a very basic question, but my brain isn't working and multiple attempts at fixing this have proved fruitless. I'm using overflow:auto in a parent so that it stretches to the height of its child <div>s. Usually this works for me, this time it's not working: instead it hides the excess height and puts in a scrollbar so I can scroll down. This isn't the behaviour 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 the 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;
    }

Solution 1

Overflow:auto will not help you here as a way to clear your floats. #homecasestudy is expanding to contain the children, but only as far as the page boundaries.

You can try a CSS-only method for clearing divs.

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

This manufactures a block-level element after everything else in #homecasestudy, uses it to clear the floats, then does some resizing tricks to make sure the style rule adds no space.

This trick won't work in earlier versions of IE. In those cases, you should add zoom: 1 to the #homecasestudy rule in place of overflow: auto.

If your quote is long, it will still overflow the boundaries of the box because it is absolutely positioned -- there's no good way to "contain" absolutely positioned items. If the quote has to be contained, try to find a way to do it with floats instead.

See a working example here. I removed the "absolute" from the quote box in this example. http://dabblet.com/gist/2116495

Solution 2

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

I would suggest you remove the min-height rule from #homecasestudy. This will let the contents set the height of the container and you should see no scroll bars. No height or overflow rules needed.