Usability Views Article Details
 home | timeline | recent | popular | e-reports | userati | books | about 

CSS Swag: Multi-Column Lists (26 Sep 2005)
The reality is not so ideal. Unlike the horizontal wrap that our browsers handle automatically, vertical wrapping requires us to explicitly state which list items occur in which columns or where the columns should break. To keep a modified list wrapping properly, we must rearrange the list items, change classes and attributes in the markup, or tweak rules in the stylesheet. The only technique described here that doesn’t need any of that fuss (Method 1) has other serious behavioral problems. Finally, because vertical proportions are so important here, most of these lists are going to break if we assume that each list item will occupy one line, only to have some items wrap to two or more lines.

So why do we bother? Well, because the final effect is so cool—and practical. Wrapping a list into columns can relieve the website visitor of the necessity to scroll down a long list. A three- or four-column list can fill the width of a page while a single skinny column could leave the layout looking anemic. There are as many reasons to wrap lists as there are web designers: very definitely More Than A Few.
Article URL:

Read 154 more articles from A List Apart sorted by date, popularity, or title.
Next Article: Fine-tuning your Internet deception detectors
  RSS 0.91  Subscribe with Bloglines  Add to My Yahoo!  Preview in Google Reader
Books about Usability | Information Architecture | Information Visualisation | Technology History

Some of the people who make up the Userati group
This site is a labour of love built by Chris McEvoy

Amazon Honor SystemClick Here to PayLearn More