Navigation will not align right

Question

I spent hours trying to get this right, but it just doesn't work for me.... As you can see in the image:

The navigation just isn't right. Maybe you can help me? The site is http://elektrikhost.com.... I used the Web dev extension fore firefox for the guide lines... I don't know why it just won't work for me.... Heres the CSS:

    nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto;  width: 822px; }
nav ul { padding: 13px 0;  }
nav ul li { background: url(../images/nav-sep.jpg) left center no-repeat; display: inline; padding: 0 39px; margin: 0 auto;  }
nav ul li:first-of-type { background: none; }
nav ul li:last-of-type { /*background: url(../images/ref2.png)*/ no-repeat right bottom; margin: 10px 0 0 0; }
nav ul li a { color: #626262; font: 1.2em Arial, Helvetica, serif; }
nav ul li a:hover { color: #dfdfdf; }

Thanks for any help...

Answer 1

Adding float:right; to nav in firebug did help me to move it to the right. Is it what you wanted?

Answer 2

Yours style is:

.plan-wrap
{
margin: 0px 0px 0px 3px;
width: 897px;
}

Mine is this and it centered for me just fine:

.plan-wrap
{
margin: 0px 0px 0px 10px;
width: 897px;
}

Is this what you need?

Answer 3

your #main-wrap is 897px wide and the nav is 822px wide with margin : 24px auto. So, the "extra" 75px is getting distributed and causing the problem. Either make the nav 897px wide as well or adjust the margin accordingly.

The whole point of using HTML5 elements is to be more semantic. If you do decide to use them, go all the way and get rid of <div> and use <section> instead. To make IE support the HTML5 elements, try these links

http://remysharp.com/2009/01/07/html5-enabling-script/

http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/

hope this helps.

Answer 4

You may want to re-think your wrapper around the content. Maybe include the nav and the plans together and have them at 100% width.