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;
    }

Position:absolute always messes with the layout. The normal rules don't apply then. — Mr Lister
– Mr Lister, Commented Mar 19, 2012 at 15:12

user100943 · Accepted Answer · 2012-03-19 15:44:22Z

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

answered Mar 19, 2012 at 15:44

user100943

Sign up to request clarification or add additional context in comments.

1 Comment

GluePear Over a year ago

Yes, you're right about the position:absolute. Thanks for reminding me of that! I'll find another way of positioning it. Thanks very much for your efforts on this.

Surreal Dreams · Accepted Answer · 2012-03-19 15:35:57Z

1

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.

answered Mar 19, 2012 at 15:35

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

2 Comments

GluePear Over a year ago

Hi, thanks for your response, but this doesn't fix it. If I take out min-height, then #homecasestudy doesn't stretch down to fit any of its contents.

Surreal Dreams Over a year ago

Have you tried getting rid of that position:absolute rule? If that doesn't help, I'd suggest you set up a jsfiddle with your content and we'll go from there.

Collectives™ on Stack Overflow

No scrollbar when using overflow:auto and div heights

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related