CSS Help Plz! - Footer Div overlapping Main Div

Hi,

I have been struggling with what I hope someone can easily help me solve…

My problem is that I’m trying to set a site up a set that is composed of three main divs: a header, main body section, and a footer. The header and footer have fixed heights, but I need the main body div to automatically expand its height based on the content within it, and push the footer down with it as it does.

The thing is that within the main div, I have ‘sub’ div’s that will hold various content…this is where my problem is, as the sub div’s show up, but the main div does expan to accomodate them–they spill outside of it…and therefore the footer does not get pushed down as it should, and the sub div’s overlap the footer… (please see attached screenshot below)

I need the main div to have no fixed height, as the amount of content from page to page will differ.

Can any one help me out? I have attached the css and html file. All suggestions will be greatly appreciated.

Thanks!
-b.