Question about nested CSS?

Question

I have a box center, and I want to color that box differently depend on the page. I try this

#center {
    margin-top: 2px;
    padding: 10px 20px;    /* CC padding */
    width: 100%;
    height: 800px;
    color: black;
    font-size: 11px;        
}
#backgroundRed{
    background-color: red;
}
#container {
    padding-left: 200px;   /* LC fullwidth */
    padding-right: 240px;  /* RC fullwidth + CC padding */
}
#container .column {
    position: relative;
    float: left;
}

so then I would try this

    <div id="containder">
        <div id="backgroundRed">
            <div id="center" class="column">
            abc   
            </div>
        </div>
    </div>

however the background of the box does not turn to red, someone explain to me what did I do wrong? btw, I must have class="column"

Disregard if this is just example code, but if this is your real code: 1) you'd be better off using a name that describes what the outer box IS instead of what it should look like, in case you want to change it in the future. It would be silly to later have div#backgroundRed have a blue background. But if it's called div#navigationBox or something, it will still make sense. Same idea with div#center - describe what it is, not how it looks, in case that changes. 2) If this is truly per page, you might consider putting a class on the body. — Nathan Long
– Nathan Long, Commented Oct 7, 2010 at 16:18
@Deniz: yes, there is. Please check my updated post. @Nikita: you are right. I have a another <div id="container"> outside. If I take that div out, it work. I updated my post. Can u take a look at it. @Nathan: Thank you. I will definitely keep that in mind — Thang Pham
– Thang Pham, Commented Oct 7, 2010 at 17:05

Nathan Long · Accepted Answer · 2010-10-07 16:13:36Z

4

Maybe what you wanted was this rule?

#backgroundRed div#center {
    background-color: red;
}

That means "if div#center is a child of #backgroundRed..."

Your example should make the outer div have a red background.

answered Oct 7, 2010 at 16:13

Nathan Long

127k105 gold badges356 silver badges467 bronze badges

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

Comments

user466089 · Accepted Answer · 2010-10-07 16:32:31Z

1

Try the following code

#backgroundRed{
background-color:red;
overflow:hidden;
}

answered Oct 7, 2010 at 16:32

user466089

1 Comment

Thang Pham Over a year ago

It works to some degree with me. However, I think overflow:hidden, hide every thing else around it. I end up with a box, correctly color but everything around it disappear. +1

Collectives™ on Stack Overflow

Question about nested CSS?

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