How can I break a single list into multiple columns semantically?

How can I break a single list into multiple columns semantically?

The current approach our site is using to break a single list into
multiple columns is to use multiple uls:
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
<li>four</li>
</ul>
This doesn't seem ideal to me, since semantically, it's not two lists,
it's one. I've seen a lot of inadequate solutions for multi-columns lists.
I'm looking for a solution that:
Uses the following markup structure
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
Organizes like this:
one three
two four
Not this:
one two
three four
Works without modification if list-length changes, or if items wrap
multiple lines.
Uses valid, semantic HTML.
Works down to IE8.
The ideal solution is CSS only, but I'm open to using jQuery UI or
light-weight Javascript.