I am looking for a way to get my horizontal menu items to span evenly across its division the menu is here at www.mychemistrytutor.com
Divide the number of links by the width of the container (950/6). This becomes the width of your anchor. Make sure to remove all padding and margins inside the list. (No space between the anchor widths.) Text-align in either the <li> or the <a> is centered. The following code is just an example. You'll need to tweak it, make sure that it only applies to the desired elements, etc. I got the desired result in IE6-7-8, FF, O, S and Ch. #nav ul.primary-links li { background: none; text-align: center; [COLOR="Red"]/* NEW */ margin: 0; padding: 0; [/COLOR]} #nav ul.primary-links li a:link, #nav ul.primary-links li a:visited, #nav ul.dynamic-persistent-menu-menu li a:link, #nav ul.dynamic-persistent-menu-menu li a:visited { display: inline-block; line-height: 3em; [COLOR="Red"]/* margin: 0 1em 0 0;*/[/COLOR] padding: 0; color: #ffffff; text-transform: uppercase; [COLOR="Red"]/* NEW */ width: 148px; [/COLOR]} Code (markup):
Another way to do it IF you didn't have to worry about IE6 and 7 is to use display: table because one of the things tables naturally do is stretch across and make each td as equal width as possible. IE6 and 7 don't understand display: table but you can see an example of it working in all the other browsers here. Scrunch your (non-IE or IE8) browser and stretch it out. The menu does the same. For IE6 and 7, they get floats and % widths, otherwise using the technique suggested by ywp:
Or another way of doing it is to put the links inside a container with width specified then give that container margin of 0px auto