Float seems to removing the background color

Question

I'm trying to create navigation menu and I've added float: right; to my li tag in css, I also have div named .header which happens to be the background of the menu.

From some reason, when I add float the background just dissapears and when I removed the float the background has returned to his place.

body{
    margin: 0;
}

.header{
    width: 100%;
    height:  10%;
    background: #616161;
}
ul#nav{
    list-style: none;
}
ul#nav li{
    display: inline-block;
    padding-right: 25px;
    float: right;
}

HTML

<div class="header">
 <ul id="nav">
   <li><a href="#">Website</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
   <li><a href="#">test</a></li>
 </ul>
</div>

My code is pure, no css, no margin, only display that might be causing this problem of background positioning.

Is there a possibility to keep the text in right float and background together?

Before and after float using:

enter image description here

Also have a look at: http://stackoverflow.com/questions/16568272/how-does-css-float-work-why-doesnt-the-height-of-a-container-element-increase?lq=1 ♦ http://stackoverflow.com/questions/12871710/why-clear-both-css — Hashem Qolami, Sep 27 '14 at 10:02
@HashemQolami It's not a duplicated, since the sulotion you gave me doesn't work. — ExCluSiv3, Sep 27 '14 at 10:09
Better check carefully that responses. This question is an exact duplicate. — Hashem Qolami, Sep 27 '14 at 10:27

score 1 · Accepted Answer · edited Sep 27 '14 at 10:13

1

before </ul> put this line DEMO

<div style="clear:both"></div>

it should work or add

.header {overflow:hidden;}

as suggested by @MaryMelody - DEMO 2

edited Sep 27 '14 at 10:13

Anonymous

10,002
3
23
39

answered Sep 27 '14 at 10:02

himanshu

1,732
1
11
12

I've tried this code and placed it below .header div and it does not change a thing. – ExCluSiv3 Sep 27 '14 at 10:06
http://jsfiddle.net/4htfwjy6/1/ it is working here or you can add overflow: hidden; to .header as @Mary Melody told – himanshu Sep 27 '14 at 10:09

Float seems to removing the background color

1 Answers1