CSS menu bar to span page width

Question

I'd like the main menu from this page http://www2.gardencomedyclub.co.uk to use the entire width of the page. I've tried using margin: 0 auto; in varying places in the #menu css tags but it keeps being left justified. I'd just like the margin between the li elements to expand to fill the full width of the #mainmenu div. Thanks for any help!

Answer 1

From your #menu li remove float:left and instead use display:inline-block. This will however push the last li in a new row. To solve that, You will have to change the margin and padding for "a" as margin: 0 1px and padding: 0 1px. This works in IE9, FF4.01, GG11, AF5.0.5 and Opera 11.

Answer 2

For margin:0 auto; to work, you need to set a width.

Use width:730px; on #menu and it should work.