Multiple background colors for css nested divs

Alright. This is the situation. I have created a website with a black banner at the top with a logo, its height is 100px and its background color is #000. Next I want a large "main_content" div to encompass the navigation along with any content within the page, so it would not include the footer. In this case there are several nested divs within the main_content area of the page and there is already a background color defined for them. The issue is that once I apply a background color to the div called "main_content" it only applies it to the navigation bar and then stops because it runs into the nested div that already has a color defined. I'm wondering if there is CSS rule I am missing here...

The only fix I have found is that I MUST define a height for the main_content div, is there a way around this? I don't want to have to define a height for the content area because I want it to just match the height of the content that fills it.

I think I found it, overflow:hidden, im not sure if this is the right solution but its the best I've got

What is most likely happening is that your other nested divs are inheriting the color from their parent main_content div, to fix this you should provide the color explicitly for your nested divs. Other thing you mentioned is that you want to apply height to main_content as per its content you can do so by giving it a height of 100% eg:

<style>
#main_content{height:100%;}
</style>