CSS Columns order horizontally

Question

Is it possible to order css columns horizontally?

Take this for example: http://jsfiddle.net/glee/Fa722/

It's output as 1 8 15 but i would want 1 2 3 but still maintaining a grid like structure is there some trick that can be used to achieve this or is JS the way to go?

This is what i mean talking about a grid like structure:

Answer 1

Like this. Use floats, not columns.

#limheight {
    height: 300px;
    width:600px;
}
#limheight li {
    float:left;
    padding-bottom: 20px;    
}
#limheight li a {
    color: rgb(0, 162, 232);
    display:block;
    width:200px;
}

Answer 2

You're already using inline-block so they'll line up how you want, just specify a width and they will line up as columns. Remove the column css in #limeheight and add the width to the li:

http://jsfiddle.net/thespacebean/Fa722/30/

#limheight li {
   display: inline-block;
   padding-bottom: 20px;  
   width: 200px;
}

Answer 3

Not a CSS-only solution, but had the same question and found Packery can produce the columns but packed horizontally:

http://packery.metafizzy.co