why doesn't this div get the background?

Here there is the whole example of my divs.

Why doesn't footer get the background color from the parent (conta开发者_JAVA技巧iner)?

---

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.

---

You have to clear the floating div: http://jsfiddle.net/74MvW/14/

---

It doesn't get the bg color, because the "container" div has the background, but the "footer" div is floating to left, which means that it doesn't affect the "container" div's height.

You have to either get rid of the float or simply add a clearer div after the footer div like this:

<div class="container">
    <div class="footer">
        Hello
    </div>
    <div style="clear:both;float:none;"><!-- Clearer --></div>
</div>

---

As other answers have mentioned, the problem is the float value. The nicest way to get around this is to set the .footer div to "inherit" the parent's background:

.footer {width:910px; height:150px; float:left; background: inherit}

Demo.

Some CSS properties are inherited by default (e.g. font-family); others have default properties. In the case of background-color, the default is transparent. If you want the property to be inherited, you have to say so explicitly.