Fun With Lists

When I first discovered the list tags in HTML (ul, li…) I scoffed. That’s all fine and dandy to give an example of creating a grocery list, but who is going to really use that when building a website. And so I labeled it “lame” and went on my merry way of implementing seemingly-infinite-nested tables (which, in my defense, was “cool” in 1998). How times have changed.

With the onset of CSS, and the CSS box model (link provided for Microsoft developers who need a quick refresher on how its supposed to work) there are now alternatives to tables that are cleaner, easier to code (and refactor) and do not make the fatal mistake of mixing structure with presentation. Although DIVs are in widespread use as a table alternative, there are cases when you want some organizational pattern to your presentation, without being locked down by table badness. Enter: lists.

A traditional list, good for making grocery lists, looks like the following:

• Chicken
• Snow Peas
• Soy Sauce
• Frozen Pizzas

And uses the following standard HTML:

<ul>
<li>Chicken</li>
<li>Snow Peas</li>
<li>Soy Sauce</li>
<li>Frozen Pizzas</li>
</ul>


Now, lets say I want the list to display horizontally rather than vertically. Let the CSS begin. This particular example will use multiple lists, and attempt to list them all side-by-side in a visually appealing manner.

First, I always create a “wrapper div” around the objects I style, so as to not accidentally apply styles to somewhere they don’t belong (you know, for all those other lists on your page).
<div class=”listContainer”>
</div>

Second, place your lists inside the div.
<div class=”listContainer”>
<ul>
<li>Joe</li>
<li>Donahue</li>
<li>joedonahue.org</li>
</ul>

<ul>
<li>Adam</li>
<li>Spriggs</li>
<li>sprignaturemoves.com</li>
</ul>

<ul>
<li>Darren</li>
<li>Boyd</li>
<li>truthordarren.com</li>
</ul>
</div>

So far, not very exciting.

But wait! Add the follow CSS goodness:
<style>
.listContainer {
width: 100%;
}

.listContainer ul {
float: left;
width: 100%;
}

.listContainer ul li {
list-style-type: none;
float: left;
display: block;
width: 120px;
}
</style>

And you have a table, without the table. A lot cleaner, easier to refactor, and the presentation could be changed at any time without needing to the change the structure underneath it.