wickedways.org :: web standards all around

You'd think this would be relatively easy but I can't figure out how to build a simple two-column list using XHTML/CSS. I have googled and haven't found a straightforward answer. …

I have resorted to using a table to get this done - and it validates as XHTML transitional. If anyone knows a cleaner way of doing this using pure CSS I would be keen to know.

— skyrocket from csscreator.com

A simple trick

A good way to do this is to set the width of the ul to about half the container's width and use float: left; to get a two-column list layout. I've opted for a slightly more complicated approach that uses a div.examplelist class to contain each ul so that a heading can go before each list.

Example of floating lists

My to-do lists

I need to get this stuff done.

Around the house
  • Wash my clothes
  • Clean the kitchen
  • Exterminate my girlfriend's cats
  • Walk my dog
For work
  • Finish benchmark site
  • Put up volunteer t-shirt comic at alachuahumane.org
  • Work, work, work, …
For my car
  • Remove futon from back seat
  • Wash and wax
  • Change oil
  • Adjust camber on front wheels
  • Flush transmission fluid
  • Find remote
My desk
  • Remove coke cans
  • Find horrible smell and clean/relocate/kill
  • So many pens!
  • Get better mousepad
  • Pick up papers that have fallen behind
  • Escape desk, flee to beach

Busy, busy

I have much to do.


<style type="text/css">
div.examplelist {
float: left;
width: 200px;


<h4>My to-do lists</h4>
<p>I need to get this stuff done.</p>

<div class="examplelist">
<h5>Around the house</h5>
<li>Wash my clothes</li>
<li>Clean the kitchen</li>
<li>Exterminate my girlfriend's cats</li>
<li>Walk my dog</li>

<div class="examplelist">
<h5>For work</h5>
<li>Finish benchmark site</li>
<li>Put up volunteer t-shirt comic at <a href="http://www.alachuahumane.org/">alachuahumane.org</a></li>
<li>Work, work, work, &#8230;</li>

<div class="examplelist">
<h5>For my car</h5>
<li>Remove futon from back seat</li>
<li>Wash and wax</li>
<li>Change oil</li>
<li>Adjust camber on front wheels</li>
<li>Flush transmission fluid</li>
<li>Find remote</li>

<div class="examplelist">
<h5>My desk</h5>
<li>Remove coke cans</li>
<li>Find horrible smell and clean/relocate/kill</li>
<li>So many pens!</li>
<li>Get better mousepad</li>
<li>Pick up papers that have fallen behind</li>
<li>Escape desk, flee to beach</li>

<h4 style="clear: left;">Busy, busy</h4>
<p>I have much to do.</p>