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.

Dan · Accepted Answer · 2010-02-07 05:48:11Z

2

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

answered Feb 7, 2010 at 5:48

Dan

5533 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarfraz · Accepted Answer · 2010-02-07 05:46:50Z

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>

answered Feb 7, 2010 at 5:46

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

1 Comment

icktoofay Over a year ago

height:100%; would make it fill up all of its parent's height vertically, not all of its content's height vertically.

Collectives™ on Stack Overflow

Multiple background colors for css nested divs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related