Multiple background colors for css nested divs

Question

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.

Answer 1

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>

Answer 2

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