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

this question has answer here:

• css: set divs horizontally in 2 rows 4 answers

the current approach our site using break single list multiple columns use multiple uls:

<ul>   <li>one</li>   <li>two</li> </ul> <ul>   <li>three</li>   <li>four</li> </ul> 

this doesn't seem ideal me, since semantically, it's not 2 lists, it's one. i've seen lot of inadequate solutions multi-columns lists. i'm looking solution that:

1. uses following markup structure

   <ul>   <li>one</li>   <li>two</li>   <li>three</li>   <li>four</li> </ul> 

2. organizes this:

   one    3 2    4 

   not this:

   one    2 3  4 

3. works without modification if list-length changes, or if items wrap multiple lines.

4. uses valid, semantic html.
5. works down ie8.

the ideal solution css only, i'm open using jquery ui or light-weight javascript.

(ps, here's css attempt, notable problems.)

edit: question specific semantic lists. other supposedly "duplicate" question regarding <div> elements, different ballgame because additional markup allowed. no additional markup allowed between <ul> , <li>. question focused on semantics means there emphasis on using html indicate detail possible meaning of content.

you use columns browsers support it

demo http://jsfiddle.net/kevinphpkevin/eaewx/33/

here jquery example full browser support

demo http://jsfiddle.net/kevinphpkevin/mkl4g/131/

var postsarr = new array(),     $postslist = $('ul.posts');  //create array of posts in lists $postslist.find('li').each(function(){     postsarr.push($(this).html()); })  //split array @ point. original array altered. var firstlist = postsarr.splice(0, math.round(postsarr.length / 2)),     secondlist = postsarr,     listhtml = '';  function createhtml(list){     listhtml = '';     (var = 0; < list.length; i++) {         listhtml += '<li>' + list[i] + '</li>'     }; }  //generate html first list createhtml(firstlist); $postslist.html(listhtml);  //generate html second list createhtml(secondlist); //create new list after original 1 $postslist.after('<ul class="posts"></ul>').next().html(listhtml);