Q:

How to determine the display order of  in a list with 4 columns?

I want to create a dropdown menu (country List by continent) in 4 columns. What I'm looking for is the answer of how to determine the order of the countries. The order should be something like this:
Example 1:
Column_1  Column_2  Column_3  Column_4
   A          B         C         D

Example 2:
Column_1  Column_2  Column_3  Column_4 
    A         C         D         E
    B`

Example 3:
 Column_1  Column_2  Column_3  Column_4   
   A          C         E        G    
   B          D         F

The idea is to use all columns equally but keep the alphabetical order from the top to the bottom of each column. I'm looking for a simple solution with CSS / jQuery if possible. How can I do that?  

A:

This was a bit tricky since naive implementations tended to favor earlier columns and leave latter columns underpopulated. This version results in equal distribution of elements between the four columns regardless of number of elements.
The trick is to recalculate the number of items per column when advancing to next column based on number of items remaining.
http://jsfiddle.net/7WvmZ/1/
<ul class='menu'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<style type='text/css'>
  .menu { margin: 0; padding: 0; }
  .menu > li { 
      display: inline-block; 
      width: 100px; 
      border: 1px solid red; 
      padding: 5px; 
      vertical-align: top; 
  }
</style>

<script type='text/javascript'>
  var data = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
  var idx = 0;
  // iterate on columns
  for (var column = 0; column < 4; ++column) {
      // based on remaining items, recalculate per_column
      var per_column = Math.ceil((data.length - idx) / (4 - column));
      // this_col tracks #items in current column
      for (var this_col = 0; this_col < per_column && idx < data.length; ++this_col) {
          $('<div></div>').html(data[idx]).appendTo($('.menu li').eq(column));
          ++idx;
      }
  }
</script>

