Parent DIV with floated div's as childs

I have the following code:

http://jsfiddle.net/3fT2M/

Why isn't the two floated div background color isn't #666666 even though they are under the container div?

It works only if I set the container height which I would like to set to auto.

How can I make it work with .container { height: auto; } ?

Thanks,

http://jsfiddle.net/3fT2M/3/

Because the elemtns are floated inside the div.

This takes the element out of the normal flow of the document.

I've added the overflow: hidden; fix

Right now your div.container has no height. So you cannot see the background-color.

A simple fix is to add a <br /> before the last closing </div>.

See the fiddle: http://jsfiddle.net/3fT2M/2/

It also seems a simple .container div{background: inherit;} works.