Overflow: does not clear footer elements background, but does its content.

[DennisSmolek]

We ran into a strange issue while working on something with a list of floated elements then a footer. When we put in the background-color it caused the entire wrapper to adopt its background.
Normally the overflow:hidden; trick works but on this issue it doesnt.
I created a jsfiddel to show this issue in action. http://jsfiddle.net/DennisSmolek/g8ZR4/
Once you add clear:both it goes away, but we cant figure out why the overflow didnt work, and why the content was pushed down and not the background?

[stevendeeds]

Fixed? http://jsfiddle.net/g8ZR4/6/

[Chris Coyier]

The thing that you are applying overflow: hidden to wraps both the floated elements AND the footer. So the background stretches up because it’s right in there with the floated elements which are removed from the flow. Clear: both works because it’s now being cleared from those floated elements and the whole elements comes down past those. It is a little weird but it’s expected behavior. I’d wrap JUST the floated elements in the thing with overflow hidden.

[Author]

Posts