Is there a better or more concise way to do this? My goal was to make a list dynamically list itself into two columns, no matter the length of the list. I know this is possible by just floating the li nodes, but I wanted to keep the li nodes in the same vertical order. I would really like to hear from people who know more about JavaScript and jQuery than I do if this code looks good or if there is a better or more concise method for implementing this sort of thing.

Demo: http://jsfiddle.net/mkimitch/ZEL5x/

HTML:

&lt;ul class="columned"&gt;
    &lt;li&gt;Australia&lt;/li&gt;
    &lt;li&gt;Brazil&lt;/li&gt;
    &lt;li&gt;Canada&lt;/li&gt;
    &lt;li&gt;Chile&lt;/li&gt;
    &lt;li&gt;China&lt;/li&gt;
    &lt;li&gt;France&lt;/li&gt;
    &lt;li&gt;India&lt;/li&gt;
    &lt;li&gt;Italy&lt;/li&gt;
    &lt;li&gt;Malaysia&lt;/li&gt;
    &lt;li&gt;Norway&lt;/li&gt;
    &lt;li&gt;Russia&lt;/li&gt;
    &lt;li&gt;United Kingdom&lt;/li&gt;
    &lt;li&gt;United States&lt;/li&gt;
&lt;/ul&gt;


JavaScript:

var colLength = $('.columned li').length;
var colHeight = $('.columned').height();
var liHeight = $('.columned li').height();
if ($('.columned li').length % 2 != 0) {
    var half = (Math.round(colHeight / 2)) + liHeight / 2;
} else {
    var half = Math.round(colHeight / 2);
}
var firstrow = Math.ceil(colLength / 2);
var secondrow = firstrow + 1;
$('.columned li:nth-child(-n+' + firstrow + ')').addClass('column1');
$('.columned li:nth-child(n+' + secondrow + ')').addClass('column2');
$('.columned li:nth-child(' + secondrow + ')').css('margin-top', -half);
the best javascript is no javascript ;-)

you could use css3 columns, see http://jsfiddle.net/bjelline/JWnaz/ for the result

ul {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;


}

if you are worried about browser support: there's a polyfill for that
http://www.csscripting.com/css-multi-column/
that falls back to javascript if the browser doesn't honor the css yet.