Absolute Lists: Alternatives to Divs

I am a list person. As far back as when my own wallet started directing my spending habits, I was making lists that instructed me "what to-do," "who to call," and "who to pay back exorbitant amounts of money." Lists make the most sense when trying to organize a life that needs it. The same ethos applies to the web design world.

Drop That Div!

As we already know, lists can be tamed through various CSS techniques. These lists are most commonly contained within div tags. This article discusses how to get rid of div elements altogether, and step into a world of pure semantics utilizing only lists for an entire page.

I'll start with an example:

Figure 1A

<div id="links">
	<h2>links</h2>
	<ul>
		<li></li>
		<li></li>
	</ul>
</div>

Figure 1B

<ul id="links">
	<li class="header"><h2>links</h2></li>
	<li></li>
	<li></li>
</ul>

In Figure 1A, the div is styled and positioned uniquely according to its id. The difference between the two is miniscule, but the benefits of directly styling lists, as in Figure 1B, prove to be useful and expandable. Identical visual effects can be created using CSS with various margin and padding edits, as well as other uncomplicated CSS tricks. Styling our ideal list (Figure 1B) will be easy once we get the structure down.

In Figure 1A, the header is outside the unordered list. If you wanted to float the list to the right using the float:right CSS property, the header would not budge. The real advantage of putting the h2 element inside the list as the first item is being able to position the list anywhere you want on the page, taking the header where the list goes.

The Content

So let's practice what we preach. Check out Example 1. We give each first-level unordered list its own unique id, so they can be styled separately later on. You can see that any header within a list has a disc beside it, telling you it is indeed the first item in the list.

In the main section, we daringly put more than links in the list items: we go so far as to put another list, this time with more extended content. In the second nested list, we semantically separate each list item with its respective header and paragraph, giving true division among the different headings and concepts in the page. Visions of school notes are now flashing in my head. Call Mom... Wait, no— pay Mom $50... Hold on...

Ok, back. Of course we know the true spirit of CSS is the separation of style from content. Now that we have the content, let's style it. Shall we?

The Style

As we can see, the default styling for unordered lists is quite boring. No offense, Sir Tim. Plus, we have some unsightly discs (the default style-type) lying about that we do not want in the final product. So let's start there.

First, we begin with the designated 'header' list items in the document:

ul li.header {
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
}

Or the shorthand:

ul li.header {
	margin: 0;
	padding: 0;
	list-style: none outside;
}

Note: a CSS property of ul li:first-child could be used here to style the first item in every list, but it becomes universal. Be more specific with ul#main li:first-child, etc. Unfortunately, this valid CSS is not supported in one of the most-used browsers on the Internet.

Even with the list-style-type:none property, browsers still put an indent where the disc would have been, so we put the invisible style-type outside the margin of the list with list-style-position:outside. With help from the margin and padding properties being set to zero, the style-type disappears completely.

Standards alert: Though the W3C does not recommend directly styling li elements, it is unavoidable in this circumstance unless you want to get rid of the style-types in the list altogether.

Secondly, we continue by getting rid of discs in the main section:

ul#main { list-style: none outside }

This gets rid of the disc beside "Main content," and the seemingly random one right below it, designating the start of the nested list, used for the actual content. Further styling will enhance your list page even more, which we will see in the final example.

Now the fun part begins. Three consecutive lists on a page are not appealing in and of themselves. Though we have styled them as we want them, we can see that they could benefit from a bit of CSS positioning.

Position It!

Positioning is the real name of the game in CSS. Linear, non-styled content on a web page does not make the grade for professionally developed sites. Besides, we can do better than that. In our final steps, we see what can be accomplished with CSS positioning.

ul#main {
	margin: 0 200px 0 25px;
	background: #f99;
	padding: 10px;
	list-style: none outside;
}

The margin and padding properties read, left to right, as top, right, bottom, left (think TRouBLe, without those pesky vowels). Thus the main list is given 25 pixels of margin space to its left, and 200 pixels to its right. Padding is ten pixels all around. What to put in the 200px of blank space? You guessed it: the other lists.

ul#navigation, ul#links {
	float: right;
	clear: right;
	width: 165px;
	background: #99f;
	margin: 0;
	padding: 5px;
	list-style: inside square;
}

As we want both lists to be aligned vertically, one atop another, we use the float:right and clear:right properties. The links list will clear the floated navigation list, putting it beneath the latter.

The total width of the side lists, true to the CSS1 Box Model, will be 175 pixels (165px width + 5px left padding + 5px right padding). This gives the main content an equal 25 pixels of margin on either side, making it appear to float on the screen.

You can see the results in our final example. As with any CSS, style and position to your liking.

Notes & Conclusion

I juggled between the advantages and disadvantages of having nested h2 tags within the 'header' list items, and decided to keep them in for a simple reason: Without any CSS styling whatsoever, the headers look as they should. Without the h2 tags and unstyled, the headers have the same font size as the content below them. This is not how the header text should be interpreted. Thus the header tags stay.

As always, browsers with limited or no support of CSS will still display all information on the page in a traditional unordered list format, with no loss of structural semantics.

Using only lists for formatting an entire site can be extended to ordered lists (ol) and definition lists (dl), each with their own uses in their own respective contexts.

Creating an entire page of lists shows the power that presentation with CSS brings to the structure of a hypertext document. Having li elements represent distinctly separate items provides more division among what is being presented. This proves useful when displaying items with extended metadata in list form, such as: dates in concert schedules, items in an online store, even entries in online weblogs.

References

In attractive list format.

• Tantek's Thoughts — Inspiration
• CSS1 Recommendation by the World Wide Web Consortium