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.
The CSS
<style type="text/css">
div.examplelist {
float: left;
width: 200px;
}
</style>
The HTML
<h4>My to-do lists</h4>
<p>I need to get this stuff done.</p>
<div class="examplelist">
<h5>Around the house</h5>
<ul>
<li>Wash my clothes</li>
<li>Clean the kitchen</li>
<li>Exterminate my girlfriend's cats</li>
<li>Walk my dog</li>
</ul>
</div>
<div class="examplelist">
<h5>For work</h5>
<ul>
<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, …</li>
</ul>
</div>
<div class="examplelist">
<h5>For my car</h5>
<ul>
<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>
</ul>
</div>
<div class="examplelist">
<h5>My desk</h5>
<ul>
<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>
</ul>
</div>
<h4 style="clear: left;">Busy, busy</h4>
<p>I have much to do.</p>