I am wondering if there is an IE alternative to using column-count and column-gap?
I have made this post about creating a list that automat
Here is solution how to make menu with multicolumns which looks the same as the one created with column-count property and works in ALL BROWSERS.
This is done with floating elements, but the trick here is to re-order the elements in javascript (or server side) so they natural flow looks as up-down instead left-right
Item1 Item4 Item7
Item2 Item5 Item8
Item3 Item6
Example: http://jsfiddle.net/xrd5Y/16/
// number of columns
var columns = 4;
var $ul = $('ul.multicolumn'),
$elements = $ul.children('li'),
breakPoint = Math.ceil($elements.length/columns);
$ordered = $('');
function appendToUL(i) {
if ($ul.children().eq(i).length > 0) {
$ordered.append($ul.children().eq(i).clone());
}
else $ordered.append($(''));
}
function reorder($el) {
$el.each(function(){
$item = $(this);
if ($item.index() >= breakPoint) return false;
appendToUL($item.index());
for (var i = 1; i < columns; i++) {
appendToUL(breakPoint*i+$item.index());
}
});
$ul.html($ordered.children().css('width',100/columns+'%'));
}
reorder($elements);