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: http://www.alistapart.com/articles/multicolumnlists
Read 154 more articles from A List Apart sorted by
Next Article: Fine-tuning your Internet deception detectors