Discuss: CSS Swag: Multi-Column Lists

by Paul Novitski

1 Be careful of multi-line list items.

Some of these methods will get very messy if the text of some of the list items is long enough to wrap lines. Just something to lookout for before committing to a method.

posted at 05:20 am on September 27, 2005 by Christian Metts

2 Split Lists

I posted about this problem a while ago on my website. It may be relevant to study the comments I got when I asked how to do a split list suitable for Netscape 4:

http://www.designdetector.com/archives/04/02/AQuestionOfHTMLPart2-SplitLists.php

posted at 06:45 am on September 27, 2005 by Chris Hester

3 Whitespace

Rather than eliminating all whitespace inside a list element I prefer to just set the <li> tag to display: inline;

This may not be suitable in all instances (if you just want a plain list say). However as this list is to be styled further with floats and possibly other display settings (on the links in each li for example) I think it is a more elegant solution.

posted at 07:53 am on September 27, 2005 by David Elstob

4 Having your cake and eating it, too...

Could we not maintain semantic integrity, simple CSS, AND get our nice, beautiful, multi-column layout by using Javascript to convert lists into a multi-column variant?

In this way, everything degrades to a simple list; but for virtually all users, you get your multi-column list with none of the caveats mentioned.

posted at 10:42 am on September 27, 2005 by Jason LaPorte

5 Unique Classes

It seems a little funny to use a class to uniquely identify an item.

Classes tag an item as being part of a group. If the aim is to uniquely identify something on a page, then assigning an ID to the item is probably a better route to go.

posted at 11:25 am on September 27, 2005 by Drew McLellan

6

David, one issue with declaring list items as inline is that inline elements can’t be assigned dimension in the same way a block element can, limiting their usefulness in creating navigation menus & the like.

posted at 11:40 am on September 27, 2005 by Paul Novitski

7 Hmm

Boy, is that ever hairy markup… and absolutely positioning everything?

I’d rather use multiple lists than have to break DRY like this. I mean, what a disaster when you have to add a nav item in your markup and then track down and fiddle with all these numbers in your stylesheet.

After all, as stated in the article, it’s like three lines of PHP and an associative array to have complete control. Alternatively, if the markup is sacred, have a tiny server-generated stylesheet that auto-calculates the menu item positions.

posted at 11:43 am on September 27, 2005 by Mike Purvis

8

Jason, you’re right about the graceful degradability of client-side scripting solutions; while I did mention scripting in passing, I was focusing on CSS solutions in this article. While I use JavaScript myself, it has its own caveats: similarly to CSS it’s not universally supported, neither by makes & models of browser nor by all users. Further, I find that most javscript solutions that purport to leave the markup simple actually heavily augment the DOM when they run. To what extent does it matter whether I complicate the XHTML and CSS by hand or write a script to do it for me if the resulting DOM will be the same?

posted at 11:51 am on September 27, 2005 by Paul Novitski

9

Drew, the reason I identified list items using class instead of id was to facilitate more than one list on the same page; ids work just fine if that isn’t a concern.

posted at 12:02 pm on September 27, 2005 by Paul Novitski

10 Generating Lists with PHP

Method 4 would be the useful when you are generating content using sever side scripting (i.e. PHP), you could have a simple little function that takes a list (i.e. from an array) and splits it into N numbers of columns by assigning class=“columnN” and class=“columnN reset” through a for loop. This removes the need to ‘tweak’ the source each time there’s an item added or removed from the list.

Only useful for generated content, and probably only in certain situations at that, but once implemented it looks after itself, as long as you can live with presentation vs semantics use of CSS class names.

Interesting article Paul, thanks for the different ideas.

posted at 12:07 pm on September 27, 2005 by Chris Batchelor