css and divs - parent's attribute for children



I have a content-div with style background color set:

#content { background-color: #FFF; }

The conent div has 3 child-divs like this:

#content_right(middle,left) { float: left; width: 500px; }

And html code is:

<div id="content">
  <div id="content_left">...</div>
  <div id="content_middle">...</div>
  <div id="content_right">...</div>

I want the content-background color to be inherited by child-divs but they are not.

It seems the only way to set child div backgrounds is to set them individually for all children.

Question: How can I set bg-color only in the parent content-div so the style will propagate to the child divs?

5 ответов


Background color is usually treated as transparent, not inherit, by default. With inherit, the background image would be copied to each element and displaced by margins/paddings/etc (has a more obvious effect with background images).

Normally, this wouldn't matter, since the parent would usually become large enough to contain all of the children (so they would show through the parent's background). But, since you're using float on all children, the actual size of #content is not actually the size of the child divs combined.

Floating content can exist outside the bounds of its parent.

Without any static content of its own, #content has a height of 0, while content_left/right/middle actually exist below it (since they have ... for content, their height defaults to line-height).

To get a better view of what's happening, try adding a height to #content and background color to the children (or use "Inspect Element" and tag highlighting in Chrome or Firebug):

#content { background-color: #FFF; height: 5px; }
#content_right(middle/left) { float: left; width: 500px; background: #ccc; }

But, yes, you need to specify the background color in the floating divs rather than their parent.


try declaring your child divs as such in the CSS, like so:

#content #content_right(middle,left) { float: left; width: 500px; }

This syntax is invalid:

{ float: left; width: 500px; }

The correct would be:

#content_right, #content_middle, #content_left
{ float: left; width: 500px; }

I guess you've done that just to make the code shorter on your post here at stackoverflow, but I advise you against that. Other users might think that syntax is valid and get confused when noticing that it does not work.

  • I know that. I just didn’t wanna write much text and content_* has different css-attributes.

    Max Frai12 сентября 2009, 04:45

Как распространить цвет фона родительского CSS на дочерние блоки div.

Установите дочернее свойство background-color для наследования следующим образом:

        background-color:inherit;  //<--This says child inherit background color.


  <div class="header">
    <div class="leftChild">abc</div>
    <div class="rightChild">def</div>

Только некоторые свойства наследуются от родителя автоматически. Если, например, границы были унаследованы от родителя, результат выглядел бы очень беспорядочно, так как все дочерние элементы имеют границы.

Цвет переднего плана наследуется по умолчанию, а цвет фона - нет. Причина этого очевидна: в большинстве случаев вы хотите, чтобы цвет переднего плана наследовался дочерними элементами, но если бы у родительского элемента было фоновое изображение, вы бы не хотели, чтобы дочерние элементы имели то же изображение, что и их фоновые изображения, вероятно, конфликтуют с фоновым изображением их родителей.


Not entirely sure what exactly you're asking but surely:

#content div { background-color: #FFF; }

Is an adequate solution?