How to split dynamically generated buttons into columns using Javascript? -

i have javascript code generates buttons of 2 types. header button varying amount of content buttons underneath. using css3 split buttons columns '-webkit-column-break' not function in internet explorer or safari.

i have approach custom javascript in mind. i'm wondering if it's possible, , how might accomplish it. here pseudo code;

create 3 divs - 1, 2, , 3  count header array. divide count 3 find number place in each column.  create counter. each header placed increase count 1. if count equal column maximum use div 2. if div2 count equal column maximum use div 3. 

i can see 1 problem approach doesnt account varying number of columns underneath headers. column 1 , 2 equal length or 3 equal if possible.

fixed. here's how did it

js fiddle here

 var mycars = new array(); mycars[0] = "saab"; mycars[1] = "volvo"; mycars[2] = "bmw"; mycars[3] = "porsche"; mycars[4] = "daewoo"; mycars[5] = "mg";  var arraycount = mycars.length;  var columnlength = arraycount / 3;  (var i=0; < mycars.length; i++) {  if (i<columnlength) {       document.getelementbyid('carlist').innerhtml += '<button class="countrybuttons"> '+       mycars[i]+' </button><br />'; } else if(i< columnlength*2) {  document.getelementbyid('carlist2').innerhtml += '<button class="countrybuttons"> '+    mycars[i]+' </button><br />';  }     else if(i< columnlength*3) {  document.getelementbyid('carlist3').innerhtml += '<button class="countrybuttons"> '+      mycars[i]+' </button><br />';    }   }