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.
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.