The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #33511

    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.
    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?

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.