CSS background-color inheritance not working on child DIV

[Cainnech]

Hi guys,

I have an issue with a webpage which is not displaying as it should eventhough I don't see any mistake.

I have a series of divs which are all children from one parent div. The first div gets the backgroundcolor from the parent which it should, however, the second div doesn't get the backgroundcolor and I don't understand why?

Can someone explain what the problem is?

You can see the isolated html and css on http://jsfiddle.net/ucu8j6u6/

I removed any content which isn't readable to most of you and just replaced it with bla bla bla. You'll see the second line of blablabla... has a white background instead of the pink one I used to demonstrate what I wanted to do.

If someone can explain me what the problem is, that would be great.

[iam_clint]

Floated elements do not inherit from the parent. Remove all the float: left; and you will see it inheriting properly. You will have to specify the color on each one if float is needed.

you can inherit the background in each itemclass
background-color: inherit;

[Cainnech]

Ah, I see.
Is there a specific explanation why floated elements can't inherit from their parent? Because they do have a parent?

And one thing I don't fully understand yet. How come the first subdiv does take the background color but the second one doesn't? They are both floated?

[Exequiel]

put this html tag after the </div>(close) for your 2nd itemDetail and before the closing tag for the parent div itemHeader color1 class.

<div class="continue"></div>
 

then copy paste this css

.continue{clear:both;}

we used that code for continue for us to see the entire parent element. because the floating elements affects the parent and the parent's height does not automatically viewed, so we used continue{clear:both;} to automatically set the height for the parent element or div.

by the way no need to remove the float: left;.