How to CSS a two column list of items?

Question

I need to display a two column list of items according to the following rules:

• Container for the columns has fluid width
• Width of both columns needs to be equal
• Items are dynamically rendered and at least one will be displayed
• Item ordering needs to flow down the left column first, then the right
• Items need to line up evenly across the bottom or in the case of an odd number the extra item should show in the left column

Here is an example:

~ Item 1   | ~ Item 6
~ Item 2   | ~ Item 7
~ Item 3   | ~ Item 8
~ Item 4   | ~ Item 9
~ Item 5   |

The HTML can be anything as long as it solves this problem. I'm restricted to using XSLT to wrap HTML around what the server spits out. I have access to two XSLT parameters: one that tells me the current item number and one that tells me how many items there are.

My CSS skills are basic/intermediate and I don't know where to start here. Any ideas on whether this is achievable and how to do it?

Update:

Thanks for the answers. Consensus seems to be either use the A List Apart article or a table which I'd prefer as it's simpler. The problem with the table is that the server gives me the items in sorted order. To use a table would mean XSLT trickery to re-sort, wouldn't it?

<tr>
    <td>Item 1</td>
    <td>Item 4</td>
</tr>
<tr>
    <td>Item 2</td>
    <td>Item 5</td>
</tr>
<tr>
    <td>Item 3</td>
    <td>&nbsp;</td>
</tr>

Answer 1

You just need the CSS multi-column properties, e.g. ul { column-count: 2; }.

See Can I Use for support information on CSS Columns.