Aligning two navigation bars of different widths with margin auto? CSS/HTML

Question

I am trying to align a 2nd navigation bar that is shorter than the original navigation bar, to meet the right hand side of the original. Probably doesn't make much sense so here is an image to help: http://i49.tinypic.com/nohno7.jpg

The CSS for top navigation bar is :

#nav { width:940px; height:40px; margin:0 auto; padding:0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }

The CSS for the 2nd navigation bar is :

#nav2 { width:547px; height:40px; margin:1px auto; padding:0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }

If anyone can help point me in the right direction that would be great.

Thanks a lot.

Answer 1

float:right might solve your question for the 2nd nav bar?

EDIT: I guess I've got what your page look likes: your nav bars are just directly inside the body tag. So let's do some small changes:

1. Add a div holding your two nav bars. Let's call it nav-bar .
   <div id="nav-bar"><!--1st nav--><!--2nd nav--></div>

2. Add some css:
   #nav-bar {width:940px;height:80px; margin:0 auto; padding:0;}
#nav2 {float:right;}

And complete the rest of the css for nav2 Hope this helps

Answer 2

.nav-container2 { width:940px; margin:auto; height:30px;}
#nav2 { width:547px; height:40px; float:right; margin:1px 0 0 0; font-size:105%; background:url(../images/bg-nav.png) 0 0 repeat-x; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; box-shadow:0 0 3px #ccc; }