Is there a way to do this? When using navigation that can change the number of items often, it would be nice not having to calculate the with and updating the css, but just having a solution that works.

if that's impossible (I'm assuming it is) can anyone point me to a javascript that can do this?

edit

re: provide code some code basically I'm working with, what I think is, the most typical setup

<div class="main">
 <div class="nav">
  <ul>
   <li>short title</li>
   <li>Item 3 Long title</li>
   <li>Item 4 Long title</li>
   <li>Item 5 Long title</li>
   <li>Item 6 Extra Long title</li>
  </ul>
 </div>
</div>

edit

.main {
 width:100%;
 text-align:center;
}
.nav {
 margin:0 auto;
}
.nav ul li {
 display:inline;
 text-align:left;
}

the issue I've found with this/these solutions is that the content is nudged to the right adding some right padding (of 40px) seems to fix this across the browsers I'm checking on (O FF IE). .nav { margin:0 auto; padding-right:40px; } I don't know where this value is coming from though and why 40px fixes this.

Does anyone know where this is coming from? it's not a margin or padding but no matter what I do the first about 40px can not be used for placement. Maybe it's the ul or li that's adding this.

I've had a look at the display:table-cell way of doing this, but there's that complication with IE and it still has the same issue as the other solution

edit (final)

okay I've tried some things in regard to the indent. I've reset all padding to 0

*{padding:0;}

that fixed it, and I don't need to offset the padding (I think I'll leave my whole process up so if anyone comes across this, it'll save them some time)

thanks for the comments and replies