Full-width Nav bar centered-right with content area - html

Question

I'm having trouble with centering my full-width navbar with my fixed content area. The ul changes with browser or resolution.
here is a fiddle with my problem:
http://jsfiddle.net/fwyNy/
subject site
css:
#topribbon{
width: 100%;
height: 30px;
background-color: #AA1119 ;
margin: -11px 0px 1em 0px;
position: fixed;
z-index: 9999;
}
#topribbon ul{
width:auto;
padding-top:5px;
margin:0px 385px 0px auto;
float:right;
}
#topribbon ul li{
float:right;
color:white;
padding:0 10px 0 10px;
list-style:none;
display:block;
line-height:20px;
text-align:center;
cursor:pointer;
width:auto;
}
#topribbon ul li:hover{
color:#5C8FA5;
}
and here is the html:
<div id="topribbon"> <ul>
<li>Free Ground Shipping on all orders over $99!</li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>[phone]</li>
</ul>

Answer 1

You should give the inner ul a position:relative, a width and then use margin: 0 auto
position:relative;
margin:0 auto;
width:980px; (for example)
http://jsfiddle.net/fwyNy/2/
(stretch the space of the 'result')

Answer 2

try
http://jsfiddle.net/Xxm76/34/
.lContent {width: 200px; border: 2px solid #000; border-right: none; float: right; position: relative;}
.rContent {width: 300px; border: 2px solid #000; border-left: none; float:left; position: relative;}
it d be cross-browser stable ??

Answer 3

Here is a basic example of how I would do it:
<div id="wrapper">
<div id="outer">
<div id="nav">
<ul>
<li>Free Ground </li>
<li>Why Us?</li>
<li>Account</li>
<li>Cart</li>
<li>555-5555</li>
</ul>
</div>
</div>
</div>
And the css:
#wrapper{
height: 5em;
background: #000090;
padding-top: 2em;
}
#outer{
width: 100%;
height: 3em;
background: #000;
}
#nav{
height: 3em;
background: #ccc;
width: 70%;
margin: 0 auto;
float: right;
}
#nav>ul>li{
width: auto;
list-style: none;
display: inline-block;
margin: 0 0 0 1em;
}
Fiddle: http://jsfiddle.net/fqTwN/