CSS height problem for DIV

[scottcrumpler]

I've seen some similar posts for this kind of question, but nothing that seemed to exactly address my problem, and the only other answers I've seen online are to use JS to fix it, which I would like to avoid.

Here's the situation:

I'm making a template for a CMS, and I don't want to use tables. I have a main div that has a background color, and all the other div elements are nested in it. This keeps the layout centered in the browser. The problem is that when the content in the nested div's exceeds the height of the main div, the main div doesn't expand to contain them.

Using ".layout {height: 100%;}" only stretches the main div to the height of the screen, but if you scroll down and the nested div's which contain the content extend beyond that, the main div won't expand any further.

Is there any way to fix this using CSS?

For reference, here is the URL to my site: http://socialcontext.net