Source : http://stackoverflow.com/questions/18260931/how-can-i-break-a-single-list-into-multiple-columns-semantically et http://jsfiddle.net/kevinPHPkevin/MKL4g/131/.
<ul>
<li>Post 1</li>
<li>Post 2</li>
<li>Post 3</li>
<li>Post 4</li>
<li>Post 5</li>
<li>Post 6</li>
<li>Post 7</li>
<li>Post 8</li>
<li>Post 9</li>
</ul>
(function($) {
var postsArr = new Array(),
$postsList = $('ul');
//Create array of all posts in lists
$postsList.find('li').each(function(){
postsArr.push($(this).html());
})
//Split the array at this point. The original array is altered.
var firstList = postsArr.splice(0, Math.round(postsArr.length / 2)),
secondList = postsArr,
ListHTML = '';
function createHTML(list){
ListHTML = '';
for (var i = 0; i < list.length; i++) {
ListHTML += '<li>' + list[i] + '</li>'
};
}
//Generate HTML for first list
createHTML(firstList);
$postsList.html(ListHTML);
//Generate HTML for second list
createHTML(secondList);
//Create new list after original one
$postsList.after('<ul></ul>').next().html(ListHTML);
})(jQuery);
ul{
float: left;
padding: 10px;
}