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
