Hi, I'm trying to create a list (a big one) to be split into three columns whilst still remaining only one list, and also with the list items going down rather than across. Example:

LI 1 LI4 LI7
LI 2 LI5 LI8
LI 3 LI6 LI9

As opposed to:

LI 1 LI2 LI3
LI 4 LI5 LI6
LI 7 LI8 LI9

The only way I've come up with so far is by using different classes for each column, but I can't help feel there's a less complicated way to achieve this.

Any help would be great.

P.S. This is the first time I've seen the re-branded site - does anyone else think the new theme has pulled focus away from what is really great about this site? i.e. providing great advice on all aspects of design as opposed to focussing on the so-called 'entrepreneurs' of the web? I dunno, I can just see the new branding moving us closer towards a 'Digital Point' kind of community, which would of course be devastating. Sorry for the ramble, I was away for the big change!

Hmm not sure I quite get what you mean...

Um, did you just answer your own post?

The only way I have ever done a multi-column list while using only one ul is with this float method:

ul { width:600px; }
ul li { width:200px; float:left; }

This code would create 3 columns, each 200px wide. Though, not in the order you want.

As you can see, the "width" of the li must be an equal dividend of the the ul width. It can be any number of columns.

There may be other methods but this one always worked for me.

Hey, thanks for the reply. I am aware of this method, and was looking for something that would order my items correctly. Is there really no easy way to do this using only one list?

And btw no I didn't answer my own post - a post was deleted that just had gobbledegook all over it

And btw no I didn't answer my own post - a post was deleted that just had gobbledegook all over it

Ha, I didn't see the removed post! Sorry. I didn't think you were nuts!

Is this list being populated by a database dynamically or is it hard coded?

It's a pure and simple HTML list of every country in the world (more or less)

There is no scripting or databasing of any kind going on. Kinda surprised cos the more I look around for a solution, the more there doesn't really seem to be one. Like I said before, the only thing I have seen that will work is to assign different class names to each third of the list

cannot be done with CSS you will have to re-order the list items server-side.

Maybe I am not understanding why it needs to be "one" list? I assume by "one list" you mean 3 columns within one <ul>?

If you are hard-coding why not just make 3 <ul> lists broken into equal lengths, then float each ul with a defined width? No classes needed at all unless you can't target from the parent div or something.

Here's a solution using jQuery - http://codeasily.com/jquery/multi-co...st-with-jquery

or, pure css - http://rickbjarnason.com/creating-mu...sts-using-css/

Ok, well thanks for the help guys, I think I'll either assign classes or go server-side