Layout a HTML list in evenly-spaced columns

Question

I'd like to lay out a list such as the following in 2/3 evenly spaced columns

<ul>
  <li>one<li>
  <li>two<li>
  <li>three<li>
  <li>four<li>
  <li>five<li>
  <li>six<li>
  <li>seven<li>
  <li>eight<li>
  <li>nine<li>
</ul>

One solution is to separate the list into two lists and float one of them right, possibly with a margin, e.g.

  <div id="col2">
    <ul>
      <li>one<li>
      <li>two<li>
      <li>three<li>
      <li>four<li>
      <li>five<li>
    </ul>
  </div>

  <ul>
    <li>six<li>
    <li>seven<li>
    <li>eight<li>
    <li>nine<li>
  </ul>

#col2 {
    float: right;
    margin-right: 450px;
}

This works OK, but has a number of shortcomings:

1. (Un)semantic markup - it's not really 2 lists, I've split a single list into 2, just to make it easier to style
2. The margin must be manually set to something that gives the appearance of being evenly spaced
3. If the browser is made sufficiently narrow, the right-hand column will run into the second.

Is there a better way to do this, preferably without using a table?

---

Update:

I tried out Method 1, but I'm seeing some strange results. If you look at this 3-column list on you'll see there are 'holes' in the first 2 columns. Any idea why?

Answer 1

This article from A List Apart covers the commonly-accepted, close-to-best-practices-as-we-can-get methods for doing what you describe.

Answer 2

Why without using a table? This is precisely what tables were intended for.

Answer 3

I don´t know if you want 2 directly below 1 or if it can be next to 1 like:

    1    2    3
    4    5    6

Because if that´s the case, you can give your li's a fixed width of 33% and float them or display them inline.

Edit: It´s basically method 1 of the article Rex M referred to (just read it, nice):

You can use the html that´s already there, the first complete list and add the styles:

ul {
    width: 100%;        // for example
}
li {
    float: left;        // option 1
    display: inline;    // option 2, just one of the two
    width: 33%;         // for 3 columns, use 50% for two columns
}

It´s all in the article as well.

Answer 4

Height of <li>-s is different. Try to set fixed height for a list item in css. You can also use something like

border: 1px solid red;

As one of the rules for list item to see what's going on.

I vote for a table here too since using method one breaks order of items. But if that's not an issue for you, then go ahead.