How can i order an html list like this with css or javascript?

Question

I want to order a list of items in this order (image attached). each column should have 5 rows and then the next 5 gets another column and continue...

this list is generated dynamically via sql query with a loop on the li tag.

so i just need to find a way to order it that way in javascript or css...

Example

You want it ordered by number like that? Or is it like that already? — Shawn31313
– Shawn31313, Commented Jul 29, 2012 at 18:26
elements don't flow like that. Am interested in a possible answer anyway — codingbiz
– codingbiz, Commented Jul 29, 2012 at 18:34
Here is the example: jsfiddle.net/shawn31313/EV3he/1. If you could get the sql to setup the items like I did in a list and then split it, then this would work. I think I would also make a solution for making the whole thing dynamic and making seperate tables. + this is setup so it only works with the 15. I don't know how else I could do this though. — Shawn31313
– Shawn31313, Commented Jul 29, 2012 at 18:38
@Shawn31313 you just destroyed the semantics of a list, not to mention making the list read completely different for visual and screenreader users. — steveax
– steveax, Commented Jul 29, 2012 at 18:59

Zeta · Accepted Answer · 2012-07-29 19:25:06Z

4

Have a look at multicolumn environments. The specification is currently a candidate recommendation, so it shouldn't change that much. Keep in mind that this isn't implemented in IE prior to version 10, however there's a JavaScript fallback which should work, even on lists.

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ol>

ol{
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count: 2;
}

Note that you have to specify the actual amounts of columns somewhere. However, if every record of your SQL query equals one item you can just use something like count($result)/5.

Demo

edited Jul 29, 2012 at 19:25

answered Jul 29, 2012 at 19:10

Zeta

106k13 gold badges205 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

steveax Over a year ago

+1 you should add the non-vendor prefix rule (column-count) last though

Zeta Over a year ago

@steveax: Already added this quite instantaneously after I posted my original answer, but I forgot to add it to the demo. Thanks for the tip though.

skip405 Over a year ago

@codingbiz, I updated Zeta's fiddle - it now shows the numbers: jsfiddle.net/skip405/EV3he/5

Munteanu Sergiu · Accepted Answer · 2012-07-29 19:04:20Z

1

You can find a good example here. http://www.alistapart.com/d/multicolumnlists/example1.html enter link description here

You can also create 3 lists that start with 1, 6 and 11. In this case you dont need css or js at all. Like this:

<ol start="1">....</ol>
<ol start="6">....</ol>
<ol start="11">....</ol>

answered Jul 29, 2012 at 19:04

Munteanu Sergiu

3811 silver badge10 bronze badges

Collectives™ on Stack Overflow

How can i order an html list like this with css or javascript?

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related