why doesn't this div get the background?

Question

Here there is the whole example of my divs.

Why doesn't footer get the background color from the parent (container)?

Answer 1

When you float an element, this is like it was disconnected from the parent. So, inherit values cannot be inherited. Also, the parent stops expanding to the children heights. Remove the float and you can see it working.

But if you really need the float, you need to put background-color on footer.

Remember that you can put another <div style="clear: both"></div> after footer like showed on another answer, but it is just a trick to that the parent can follow the child height.