Flowing a list across multiple columns
Vertical positioning in ems
last revised 09-30-2004
This page demonstrates how to create semantically correct lists that wrap vertically into columns. The lists are simple HTML ordered & unordered lists, persuaded to flow into multiple vertical columns by CSS. The example lists on this page withstand text-resizing in all of the browsers tested.
The Problem
Lists normally render in a single vertical column:
- Aloe
- Bergamot
- Calendula
- ...
One way to distribute list items into columns is to give all of the items a fixed width and float them left:
- Aloe
- Bergamot
- Calendula
- Damiana
- Elderflower
- Feverfew
- Ginger
- Hops
- Iris
- Juniper
- Kava kava
- Lavender
- Marjoram
- Nutmeg
- Oregano
When a series of blocks are floated left, they line up horizontally like words in a sentence and wrap around to the next row when they reach the maximum width of their container. If exactly three items will fit on one row, the list naturally wraps into rows of three columns.
However, this isn’t a perfect solution because the resulting list reads left to right rather than down.
(If you’re viewing this page with Internet Explorer, the item numbers in the above ordered list will not show, as IE suppresses them when LI is floated left. See Browsers & quirks below.)
A Solution
The technique illustrated here sequences the list items naturally downward while breaking the list into side-by-side vertical columns:
- Aloe
- Bergamot
- Calendula
- Damiana
- Elderflower
- Feverfew
- Ginger
- Hops
- Iris
- Juniper
- Kava kava
- Lavender
- Marjoram
- Nutmeg
- Oregano
In HTML, each list item is given a unique class name: item1, item2, etc. I’ve chosen to identify the items with classes rather than ids so that more than one such list can easily co-exist on the same page.
<ul class="wraplist" id="list1"> <li class="item1"><a href="#Aloe">Aloe</a></li> <li class="item2"><a href="#Bergamot">Bergamot</a></li> <li class="item3"><a href="#Calendula">Calendula</a></li> <li class="item4"><a href="#Damiana">Damiana</a></li> <li class="item5"><a href="#Elderflower">Elderflower</a></li> <li class="item6"><a href="#Feverfew">Feverfew</a></li> <li class="item7"><a href="#Ginger">Ginger</a></li> <li class="item8"><a href="#Hops">Hops</a></li> <li class="item9"><a href="#Iris">Iris</a></li> <li class="item10"><a href="#Juniper">Juniper</a></li> <li class="item11"><a href="#Kava kava">Kava kava</a></li> <li class="item12"><a href="#Lavender">Lavender</a></li> <li class="item13"><a href="#Marjoram">Marjoram</a></li> <li class="item14"><a href="#Nutmeg">Nutmeg</a></li> <li class="item15"><a href="#Oregano">Oregano</a></li> </ul>
All of the multi-column lists below are marked up identically, except for their unique ids.
In CSS, all of the items in a single column are given the same margin-left. The items that begin a new column (in these examples, item6 and item11) are given a negative margin-top sufficient to bring them back up to the vertical position of item1. Normal document flow does the rest.
In the following examples, the red dashed line serves as a ruler to test how evenly the three columns of items line up in your browser. (If you see any discrepancies, please send me a screenshot of what you see with details of your operating system & browser version.)
Example 1: unordered list with inline anchors
When the anchors are inline boxes, the hyperlinks extend only as far as their display text. (Mouse over them to demonstrate.)
- Aloe
- Bergamot
- Calendula
- Damiana
- Elderflower
- Feverfew
- Ginger
- Hops
- Iris
- Juniper
- Kava kava
- Lavender
- Marjoram
- Nutmeg
- Oregano
Example 2: ordered list with block anchors
When the anchors are block boxes, the hyperlinks can extend to the full width of their containing LIs. (Mouse over them to demonstrate.)
- Aloe
- Bergamot
- Calendula
- Damiana
- Elderflower
- Feverfew
- Ginger
- Hops
- Iris
- Juniper
- Kava kava
- Lavender
- Marjoram
- Nutmeg
- Oregano
(If you’re seeing this page in Opera, the list item links won’t be underlined. See Browsers & quirks below.)
For cosmetic reasons I’ve set the anchor width to 2 ems less than the distance between columns, to prevent the a:hover effect from visually overlapping adjacent list items.
Being unfettered block elements, the LIs extend to the right margin of the list element — which in this case is the right margin of this text column, 40em wide. Unless limited in their width, the block anchors would likewise extend to the right margin:
- Aloe
- Bergamot
- Calendula
- Damiana
- Elderflower
- Feverfew
- Ginger
- Hops
- Iris
- Juniper
- Kava kava
- Lavender
- Marjoram
- Nutmeg
- Oregano
This is a cosmetic issue but doesn’t appear to be a functional problem — the left-most items don’t cover up the right-most items because of the order of markup; each subsequent column of list items naturally overlays the previous items, so all of the links remain accessible to the user.
Example 3: gettin’ fancy
With a little extra styling and some background images, the list can get ready to party without breaking the multi-column flow:
- Aloe
- Bergamot
- Calendula
- Damiana
- Elderflower
- Feverfew
- Ginger
- Hops
- Iris
- Juniper
- Kava kava
- Lavender
- Marjoram
- Nutmeg
- Oregano
Validation:
This page validates as XHTML 1.0 Strict and the stylesheet that formats the multi-column lists validates as CSS. (The stylesheet that formats the demo page overall doesn’t validate 100% because I’ve used expression() syntax used to tweak Internet Explorer).
Browsers & quirks:
This page appears substantially the same in these browsers running in Windows XP:
- Internet Explorer 6.0
- Mozilla 1.7.2
- Mozilla Firefox 1.0
- Netscape 7.1
- Opera 7.23
Internet Explorer:
- When an ordered list item is assigned a fixed height or width, IE6 displays its item number as 1; however, numbering is maintained correctly for the entire list and is displayed correctly for any item without a fixed height.
- When ordered list items are floated right or left, Internet Explorer doesn’t display their item numbers.
Opera:
- When the
<A>links within each list item are set to block, Opera doesn’t underline the anchor text.
Contact me:
How does this look in other browsers? Do you have suggestions for improvement? Write to paul at novitskisoftware.com
(If you haven’t corresponded with me before, you’ll get an auto-reply from my spam blocking service asking you to pass through a firewall by entering a displayed code. Please bear with this minor inconvenience, as it saves me from having to wade through literally hundreds of spams a day.)
– Paul Novitski