One List, Multiple Columns

HTML & CSS
1

I have an ol that I’d like to display in four columns. For accessibility reasons, I’d like to keep it all in a single list. I think the only thing lists are allowed to hold (in strict XHTML, anyway) is the li element, so I can’t wrap div’s around the appropriate items. The only technique I can think of is to give corresponding class names to the items that will be in the first, second, third, and fourth column, and then to jump through all kinds of CSS hoops to make it look right.

Is there any other way to do this?

2

I feared as much. Thanks for the awesome resources, though. Those look pretty cool.

3

here’s a great reference
http://www.evotech.net/blog/2009/05/css-content-counter-increment-counter-reset/

4

this is great. I’ve used


content: "  - <" attr(href) ">";

but never knew about the counter stuff. :slight_smile:

5

Hi, there is a modeul in CSS3 for multi column, however only webkit currently has support (and I think the latest versions of FF)

However it’s be best to just create your HTML to simulate the multi columns (aka set up the HTML like that)

If you don’t understand what I mean then shout.

6

The only technique I can think of is to give corresponding class names to the items that will be in the first, second, third, and fourth column, and then to jump through all kinds of CSS hoops to make it look right.
Hi,
You have pretty much answered your own question if you want it to be a single OL. That was actually one of the CSS Quizzes recently and there were many hoops to jump through. In fact IE6/7 had to get a completely different stylesheet to make them work due to the broken float model and other issues.

I will just point you to the thread and you can see for yourself what it was all about. As it is explained in the thread, CSS3 offers a Multi Column Module but it is not a cross browser solution.

Test Your CSS Skills Number 30 - Multi columns

Here are my examples from that quiz -
http://www.css-lab.com/misc-test/quiz-30.html
http://www.css-lab.com/demos/quiz/quiz-30-opera-fix.html

As far as a cross browser version without having to “jump through hoops” the easiest thing to do is simply float four columns left and use four separate OLs’. Our resident html guru “AutisticCuckoo” has provided a very elegant solution in this recent thread that uses a pseudo :before block on the LI with a counter reset to continue the decimal sequence into each column.

Restart and ordered list at a particular number

There is a refined version in post #19 that provides a very small javascript that takes care of IE6/7 since they don’t support the pseudo :before element.

All credit goes to Tommy for the code and script in the link below, all I did was turn it into a three column OL based off of the basic structure shown in the thread.

http://www.css-lab.com/misc-test/ol-counter-reset.html

I would probably use that last method if I needed full browsers support without a lot of complicated css.

Hope that helps :slight_smile: