CSS: Fixed with horizontal menu, with variable width tabs, using ul

Question

I have a horizontal menu. The markup looks like this:

   
Item 1
   
Longer Item 2
   

        

Answer 1

If you're happy using JavaScript, jQuery could solve the issue as follows

var $menu, totalwidth;

$menu = $('ul.menu');
totalwidth = ($menu.width()/100);

$('ul.menu li').each(function(){
    this.css('width',String(Math.floor(this.width()/totalwidth))+'%');
});

$menu.css('width','100%');

That's untested, but looks right to me. Comment if you've any questions at all.