CSS background disappears when using float:left [duplicate]

Answer 1

Put overflow on .main_nav

.header_wrapper .main_nav div{
    float:left;
    overflow: hidden;
}

Your clearing div forces its parent to expand, it has no effect on its sibling's background.

Answer 2

This is because floated content does not take up any space. Your parent main_div division essentially takes on a height of 0 because it has no other content, which "hides" the background (there is no height to display behind).

This information is available in the css-floating tag wiki and I've also posted other more detailed information about floating and parent containers.

Answer 3

You have to clear to your float DIV's parent which is .main_nav. Write like this:

.header_wrapper .main_nav{
  overflow:hidden;
}

Answer 4

Adding overflow:auto; to main_nav brings the background back.