Very Tricky Menu Challenge

CSS Menu Alignment Width Float

[locrelite]

So I don't know if this has a solution, but I want to throw it out there before I give up.

I have a horizontal menu, in which there are menu items in little boxes. Due to the limited CMS we're using, I have no control over the markup, which looks like this:

<div>
<ul>
<li><a></a></li>
</ul>
</div>

I've been asked to make this menu fit exactly a 700px width, so the left-most box's left edge lines up along the left margin and the right-most box's. Each list item has a variable width depending on the menu option. Naturally, all browsers render text slightly differently, which affects the width of the menu item, so the only option right now is pick the common default size and tweak the sizes for ten browsers.

This isn't fun, so I was hoping there's another option. I'm not sure this is even possible in theory.

Thanks.

[your_store]

Hmmm, I'd try the following:

div
:width 700px

ul
:width 100%

li
:display block
:float left
:width 100% / number of items (ie 25% for 4 items)
:whitespace nowrap
:text-align center

[locrelite]

Would work (it used to be something like that), but the width of each item has to be variable; i.e., "Publications" will be wider than "News".

[your_store]

Yeah, nowrap will make the individual buttons resize to fit the content. So Publications would be wider than News.

[locrelite]

Yeah, I tried it this morning and it seemed to do something close. Still working on it; thanks for the lead.