Ref.: http://stackoverflow.com/questions/7647195/evenly-spaced-list-items
made a jsFiddle of your menu… everything is perfectly spaced, dynamic, and it goes all the way to the left/right edges without JavaScript or weird/ugly HTML semantic issues. (And it should work in IE 6, if it matters.)
http://jsfiddle.net/bXKFA/2/
HTML:
CSS:
#menuwrapper {
height: auto;
background: #000;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.menuitem {
width: auto;
height: 40px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1
background: #000;
color: yellow;
}
.stretcher {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}