Nav width not changing with content - html

Question

I have a nav bar that displays fine when I have 5 navigation objects in it but when I add 3 more it drops below the main header why?
5 Objects:
7 Objects:
HTML:
<div id="header">
<div class="w960">
<div id="logo">
<h2>Text</h2>
<p>Text</p>
</div>
<nav>
<ul>
<li class="first active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li class="last">
5
</li>
</ul>
</nav>
</div>
</div><!-- end of header -->
​
CSS:
#header{background:#2d2d2f;width:100%; height:120px;clear:both;font-family:Signika,Arial,sans-serif;}
.w960 { width:960px; margin:auto; }
nav{width:auto; float:right;line-height: 50px;}
nav ul li{font-size:14px; float:left;display: inline-block;padding: 0px 11px;text-transform:uppercase;}
nav ul li a{padding: 0px 10px; color:#ffb400; text-decoration:none;}
nav ul li a:hover, .active a{color:#fff}
#logo{width: 40%;float: left;height: 90px;}
#logo h2{line-height: 41px;color:#FFB400;font-size:28px;}
#logo h2 span{color:#FFB400;}
#logo p {margin-top: -25px;color:#b8bbbc;}

Answer 1

You have two floating elements in the same line, if the sum of both width and they are bigger than the available space, they will break the line and place the second floating element below the previous: in your case nav below logo. Add borders to each of them and you will see that they are just too big.
One alternative is this: http://jsfiddle.net/Bs93k/
nav{width:auto; /*float:right;*/ overflow:auto; line-height: 50px;}
This will make nav to take the available space, however, I don't think its contents would behave as you like.
A second alternative is this: http://jsfiddle.net/PU7hV/
#header{display:table;}
.w960 {position:relative;}
nav{/*float:right;*/ position:absolute; top:0; right:0;}
Note that i wrote what you have to add and commented what to delete, the rest, leave them as you already had.

Answer 2

If you mean to ask why the background of the header container does not appear behind the links, it's because of the floated lis.
You will need to add a clearfix class.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
And apply that class to your header:
<div id="header" class="clearfix">
If you mean why do they break down a line at all, it's because of the fixed width on the <div class="w960"> container.
.w960 { width:960px; margin:auto; }

Answer 3

As long as you have no dropdown submenu I'd recommend to use overflow: hidden.
nav ul {
overflow: hidden;
}

Answer 4

If you can not change the HTML (for example you don't have access to the script which outputs the HTML) adding clearfix, you could just change the CSS like that:
#header {
background: none repeat scroll 0 0 #2D2D2F;
clear: both;
float: left;
font-family: Signika,Arial,sans-serif;
height: auto;
width: 100%;
}