CSS background disappears when using float:left

Question

This is my html:

<div class="header_wrapper">
       <div class="main_nav">
       <div>TEst</div>
       <div>TEst</div>
       <div>TEst</div>
    </div>
    <div class="clear"></div>
</div>

As you can see I want to build a menu with floating divs. Doing so the background of main_nav disappears.

.header_wrapper{

    height:129px;
    background:url('images/layout/header.png') no-repeat #1f1f1f;
    border-bottom:1px solid #1f66ad
}

.header_wrapper .main_nav{
    position:relative;
    top:77px; left:336px;
    width:750px;
    background:red;
}

.header_wrapper .main_nav div{
    float:left;
}

.clear{
    clear:both;
}

I tried to use clear:both, however the background is still gone. Any ideas why?

Did you try to assign height? – Reza Owliaei Mar 02 '12 at 18:11 — Reza Owliaei, Mar 02 '12 at 18:11

score 67 · Accepted Answer · answered Mar 02 '12 at 18:11

67

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

answered Mar 02 '12 at 18:11

j08691

204,283
31
260
272

Using _overflow:auto;_ can cause problems in some browsers like scroll bar may appear/disappear, or the content area my cut off – coderVishal Jul 04 '15 at 10:28

score 10 · Answer 2 · edited May 23 '17 at 12:31

10

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.

edited May 23 '17 at 12:31

Community

1
1

answered Mar 02 '12 at 18:14

animuson

53,861
28
137
147

He said, _"background of `main_nav` disappears"_, not the background of `header_wrapper`. His `header_wrapper` should not be collapsed since he's included a clearing `div` within. – Sparky Mar 02 '12 at 18:17
1

@Sparky672: Thanks, just a matter of changing the name of the div in my post... – animuson Mar 02 '12 at 18:19
And it's not the parent. – Sparky Mar 02 '12 at 18:26
@Sparky672: It is the parent of the divisions in it. – animuson Mar 02 '12 at 18:30
Yes, it's the parent of something... but it's clearly not the parent of what he's asking about, it's the target. – Sparky Mar 02 '12 at 18:42

score 4 · Answer 3 · answered Mar 02 '12 at 18:12

4

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.

answered Mar 02 '12 at 18:12

Sparky

98,165
25
199
285

sandeep · Answer 4 · 2012-03-02T18:19:05.130

3

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

.header_wrapper .main_nav{
  overflow:hidden;
}

edited Mar 02 '12 at 18:19

answered Mar 02 '12 at 18:11

sandeep

91,313
23
137
155

CSS background disappears when using float:left

4 Answers4

Linked

Related