Elastic / liquid horizontal menu in fixed width space with fixed width items

So, you have a site which is 980px wide and you want a horizontal menu width 4 items which span the 980px. Pretty simple, you just make them 245px wide each.

But then you add another menu item...  or even worse one of your clients adds a menu item, and eveything hits the fan.

So you want each item to automatically 'stretch' and here's how:

The HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The CSS:

ul {
  display: table;
  table-layout: fixed;
  width: 100%;
}

ul li {
  display: table-cell;
  float: none;
  text-align: center;
  width: 100%;
}

* I've included float: none just as a reminder that you don't need to float the LI's.

And there we have it, try adding an item, and it stays looking nice.

This method will not work in IE7 / IE6.