Hi, I'm having problems creating a horizontal navigation bar that runs along the top of my webpage. So far I have been able to get it centred, but it is still vertical. It's probably something really simple, but I can't seem to figure out what's wrong and it's annoying me too much!

 

This is the html :

 

<div id=navbar>

<a class="nav" href="index.html" >Home</a>

<a class="nav" href="about.html" >About</a>

<a class="nav" href="contact.html" >Contact Us</a>

</div>

 

and the CSS,

 

a.nav, a.nav:link, a.nav:visited {display:block; width:150px; height:25px; background:#3399CC; border:0px solid #000; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}

a.nav:hover {color:#fff; background:#B0E2FF;}

a.nav:active {color:#fff; background:#c00;}

 

#navbar

{

width:200px; margin:0 auto;

}

 

 

Here is a picture of what it looks like now.

#navbar {margin:0 auto;}
#navbar a {float:left}

 

You need to widen the #navbar. 3 x 150px doesn't fit inside 200px.

You then left float every <a> contained within.

 

Remember to clear your floats afterwards.