Question about nested CSS?

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 *开发者_StackOverflow社区/
    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"

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.

Try the following code

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