Page 3 of 3 This is where our coltopper class comes in. If you look carefully at the CSS in Code Block 4 you'll see we have highlighted the .coltopper selector. This declaration provides a negative top margin to any element that has the class coltopper. By doing so, we are able to "pull" the leading list item in the second and third columns up to the level of the first column, and as a consequence the following list items rise as well! It's a neat trick, but the question is, how do we know how much negative margin to use?
Let's look again at two critical rules from Code Block 4 and note in particular the line-height declaration after the <li> selector:
li {line-height: 1.3em;}
.coltopper {margin-top: -6.5em;}
The value you see there is very important. It is what will tell us how much negative margin to use for the coltopper class. Are you ready for some mathematics? The line-height set for the li selector is multiplied by the number of list items you want in each column. In our example, we have a {line-height: 1.3em;} and we want five list items in each column. Line-height, multiplied by the number of list items, give us the value for our negative margin in the coltopper selector. 1.3em * 5 = 6.5em. Although we have used relative units (ems) for these values, pixels may be used as well. The multiplication is done the same way for any line-height value and column values you choose.
Check out the result in Demo 5. Again we have given the list a background color to help you see just how things line up.
Demo 5
For correct implementation and visual effect, this method depends on the browser being able to add up the assigned line-heights of the list items, and having that sum be rendered to the same screen height as the negative margining on the coltopper class. Nearly all modern browsers can handle this, including good old Explorer for Windows. But sadly, Safari and IE/Mac cannot precisely match em values to each other, unless the em values are integers. This means that if you use em values that contain decimal points, those two browsers may display the "columns" at slightly differing vertical heights. The content is not broken, but it won't be quite as pretty as it should be.
The previous list is all fine and well if you want to see a list of our favorite zoo animals.. But what if you need to have a list of links, say, to descriptions of each one? Can that be done, too? You bet! About all we need to do is add the anchor elements and style them.
The HTML:
<ol>
<li class="col1"><a href="#">Antelope</a></li>
<li class="col1"><a href="#">Baboon</a></li>
<li class="col1"><a href="#">Bison</a></li>
<li class="col1"><a href="#">Camel</a></li>
<li class="col1"><a href="#">Chimpanzee</a></li>
<li class="col2 coltopper"><a href="#">Deer</a></li>
<li class="col2"><a href="#">Eland</a></li>
<li class="col2"><a href="#">Elk</a></li>
<li class="col2"><a href="#">Gazelle</a></li>
<li class="col2"><a href="#">Gibbon</a></li>
<li class="col3 coltopper"><a href="#">Kangaroo</a></li>
<li class="col3"><a href="#">Meerkat</a></li>
<li class="col3"><a href="#">Sheep</a></li>
<li class="col3"><a href="#">Warthog</a></li>
<li class="col3"><a href="#">Zebra</a></li>
</ol>
Demo 6
The initial presentation you see in Demo 6 is affected by the CMX style sheet. We have made no attempt in this demo to override the CMX styles other than to deal with an IE/Win browser bug (explanation below). Note that the text-decoration and background color change on hover, but that only the text area is clickable. If we want to change the presentation somewhat, we can use some CSS to style the links.
The CSS:
a:link {
display: block;
width: 7.8em;
color: #036;
position: relative; /* for IE-Win */
}
The {display: block;} allows the whole width of the anchor link to be clickable, however without a specific width assigned, they would stretch the full distance across the page. So {width: 7.8em} is given, allowing the anchors to reach almost to the next listmarker. If this list was long enough to have triple-digit listmarkers, the width of the link would have to be narrowed. Setting the width in ems allows the link to expand when the text size is increased in the browser. The {position: relative} overcomes a bug in IE/Win which prevents all but the last column of links from behaving like links and being "clickable."
Demo 7
Opera browsers will suppress the default underline of links that have the property {display: block;} unless you also specifically add {text-decoration: underline;} to the declarations. We have not done that for the demos in this article.
Without the constraints of the CMX style sheet, (which effectively prevents us from writing alternate hover styles for these demos) we could style the link list as in any number of ways to suit the needs of the project or even just our fancy.
Demo 8
As you can see, this technique is only useful for static pages, and cannot be made to easily work in a dynamic page where unknown numbers of list items may be included from a database. Still, for lists that will not normally change much, such a method may be just the thing to make the boss happy while holding on to the ordered accessibility of a true list.
Inspiration for this article came from various questions posed on the CSS-Discuss email list. Thanks goes to Paul Novitski and Alex Robinson for providing online examples of these techniques.
Keywords
CSS, list, lists, OL, UL, ordered list, unordered list, multiple column list, mulit-column list, float, floated, negative margin, bullets, background image, flowing a list across multiple columns
