Stacking DIVs

[rsmith]

I have two divs that are centered on my page, #maincontent and #footer. They are stacked vertically with no problem until the data in #maincontent is too much for the div. Then the overflow pours into #footer.

Here's the CSS:

#maincontent{
	position: fixed;
	top: 0px;
	left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
	right: 250px; /*Set right value to WidthOfRightFrameDiv*/
	bottom: 0px;
	overflow: hidden; 
	background: #fff;
}

#footer{
	text-align: center;
	position: absolute;
	bottom: 10px;
	width: 100%;
	font-size: 11px;
	color: #707070;
	overflow: hidden;
}

How do I make it so that content of #maincontent will always remain in it's DIV and simply push the #footer down?

The html is simply:

<div id="maincontent">
Content Here
</div>

<div id="footer">
Footer Content
</div>

I have a feeling it has to do with the positioning of #footer and my css definitions about it but no matter what I've tried large amounts of content just spill over or the alignment of #footer gets screwed up.

TIA

[Bonesnap]

Why is either div positioned?

[rsmith]

To make sure they are centered properly. Removing the positioning tags left justifies everything.

[jeepin81]

to center them make your margin:auto 0;. Then for the height of your body you'll want to do something like:

<style>
min-height:600px;
height:auto!important;
height:600px;
</style>

[rsmith]

Thanks I'll give it a try.