Question

I approximatley this structure

<div>
<div id='1'> </div>
<div id='2'> </div>
</div>

I want to make it so that when div 1’s content becomes too large for it and div 2 to fit in the main div, it will get a scrollbar and not push anything off the bottom of the parent div.

How can I do this in CSS?

EDIT:

the parent div (or rather, its parent) has a set height. and at this point setting overflow : scroll on div1 just causes it to go beyond the bottom with a scrollbar on the side.

Answer 1

First, you need overflow: scroll on div 1. And also you need to somehow fix such a value of its height that the div will need a scrollbar after reaching this value. Should be no problem if you have a fixed height or max-height on your parent div.

EDIT

Check this out: http://www.quirksmode.org/css/overflow.html.
It seems (unfortunately) that you nevertheless need a value for your div 1’s height. I figured out max-height will do, too.
And, by the way, for the scrollbars to appear only when necessary, you need overflow: auto.