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">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4 </a>
                </li>
                <li class="last">
                    <a href="#">5</a>
                </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.