Comments on: Multiple column lists using one

By: RCC Graphic Designs

RCC Graphic Designs — Sun, 26 Feb 2012 18:39:14 +0000

Thanks, great site and article. I came across your website looking for a solution to controlling how the list is displayed (top to bottom, left to right) as VirtualFlavius, Pablinho and John pointed out. I found other solutions but they all require extra coding in PHP or such. Is there a way of handling lists via CSS only, or is it (maybe) impossible? Thanks again for sharing.

Rommel

By: Maikel

Maikel — Tue, 22 Nov 2011 18:09:49 +0000

If you want to display “bullet points”, you could try:
li {
line-height:1.5em;
float:left;
text-align:left;
display:list-item;
list-style-type:disc;
list-style-position:inside;
}

By: Copywriting Newcastle

Copywriting Newcastle — Mon, 03 Oct 2011 14:20:42 +0000

Thanks for this solution, just wondering if you’ve got any ideas for doing it down over rather than float left so that xhtml sits under css just for a store where items need to be in alphabetical order. I’ve tried css3’s multi columns which works but it doesn’t work on old browsers.

Any ideas would be great.

By: Damian

Damian — Mon, 25 Jul 2011 06:09:52 +0000

Any ideas how to get this to work for liquid layout?

Damian

By: John

John — Mon, 20 Jun 2011 14:44:14 +0000

Great article. I’ve got the same issue as Pablinho… anyone got any other ideas?

Cheers

By: Pablinho

Pablinho — Mon, 13 Jun 2011 18:19:55 +0000

Interesting… although i’m looking for a way of doing this but ordering them vertically, and once they get to the end of the container, it jumps to the next column.. any suggestions ?

thanks in advance.

By: alex

alex — Mon, 11 Apr 2011 05:13:21 +0000

Simple, elegant solution! That’s how CSS should be. Thanks

By: VirtualFlavius

VirtualFlavius — Wed, 23 Mar 2011 22:24:24 +0000

How would you cause this solution to order list items from top to bottom, then from left to right?

Kind regards,
VirtualFlavius

By: Coffee Lover

Coffee Lover — Mon, 18 Oct 2010 09:56:17 +0000

This worked like a charm, and you can even over write some of the list items to be a larger width, and in wraps. I added for a single item to have take up two columns, thanks

By: Hudson

Hudson — Fri, 28 May 2010 14:45:33 +0000

This is so simple, so perfect!

I’m looking to do this with nested uls, preferably without using negative margins to keep the left side flush.

Any suggestions?