Stu Nicholls | CSSplay | Three column list

Information

Just unordered and ordered lists arranged in three columns using nothing more than css.

This method makes use of a definition list containing unordered lists for the top example, and ordered lists for the bottom example.

The idea of placing unordered and ordered lists within a definition list is discussed and promoted by w3c.org so it must be 'valid'.

This method also allows you to easily add a title to your list.

Because we can no longer specify a 'start' number for our ordered list I have used an alternative css method, BUT only Opera and FF v1.5 Beta 1 understand.

There really should be a css alternative to 'start='.

Cascading Style Sheet

#info dl {
  clear:both;
  width:728px;
  height:8em;
  margin:2em auto;}
#info dt {
  margin-bottom:1em; 
  font-weight:bold;}
#info dd {
  width:33%; 
  float:left; 
  margin:0;}

#info ol.first {
  counter-reset:item 0;}
#info ol.second {
  counter-reset:item 5;}
#info ol.third {
  counter-reset:item 9;}

#info ol li {
  display: block;}
#info ol li:before {
  content: counter(item) ". "; 
  counter-increment: item 1;}

xhtml

<dl>
<dt>My Shopping List (unordered)</dt>
<dd>
<ul class="first">
<li>Crisps</li>
<li>Chocolate</li>
<li>Cola</li>
<li>Fish</li>
<li>Steak</li>
</ul>
</dd>
<dd>
<ul class="second">
<li>Milk</li>
<li>Sugar</li>
<li>Baked beans</li>
<li>Tinned Peas</li>
</ul>
</dd>
<dd>
<ul class="third">
<li>Eggs</li>
<li>Coffee</li>
<li>Bread</li>
<li>Butter</li>
<li>Beer</li>
</ul>
</dd>
</dl>

<dl>
<dt>My Shopping List (ordered - only Opera and 
FF v1.5 get the numbers right)</dt>
<dd>
<ol class="first">
<li>Crisps</li>
<li>Chocolate</li>
<li>Cola</li>
<li>Fish</li>
<li>Steak</li>
</ol>
</dd>
<dd>
<ol class="second">
<li>Milk</li>
<li>Sugar</li>
<li>Baked beans</li>
<li>Tinned Peas</li>
</ol>
</dd>
<dd>
<ol class="third">
<li>Eggs</li>
<li>Coffee</li>
<li>Bread</li>
<li>Butter</li>
<li>Beer</li>
</ol>
</dd>
</dl>

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.