css and divs - parent's attribute for children

Question

Hi guys, i have this trouble. There is content-div with style:

#content { background-color: #FFF; }

And child-divs (3):

#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>
</div>

The trouble is that content-background color isn't inherited by child-divs... And i should add background-color: #FFF; to every child-describe in css. How can i set bg-color only in content-div but for all another child-divs?

Answer 1

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

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

Answer 2

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

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

Is an adequate solution?

Answer 3

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.

Answer 4

This syntax is invalid:

#content_right(middle,left)
{ 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.

Also, my weird brain refused to focus on your problem and kept complaining about that syntax error. ;)