Cool Two Column List in CSS

As a designer/programmer, the frustrating part of that phrase being the '/', I sometimes get my creativity ahead of my technical skills.

Then, I have to go out and find help, learn how to tweak it to my needs and make it work. A Two Column List controlled by CSS is just such a sad scenario.

Thankfully, ALA has a solution or 5 that can be found here. Be forewarned here and at ALA, there'll be compromises to make.

Believe it or not, I think this is the only page on this site this will be used. I'm a sucker for a challenge! Here's how I ended up getting it to work in IE 6, Firefox 1.0.7 and Opera 8.53:

See the page here.

The XHTML markup:

<ul id='top-index'
><li>Gold Leaf</li
><li>Window Lettering</li
><li>Logo Design</li
><li>Dimensional Signs</li
><li>Magnetics</li
><li>Vehicle Lettering</li
><li>Glass Etchings</li
><li>Full Vehicle Wraps</li
><li>L.E.D.</li
><li>A.D.A. Signage</li
><li>Brochures</li
><li>Business Cards</li
><li>Postcards</li
><li>CNC/3D Routing</li
><li class='last'>Large Format Digital Printing</li
><li class='last'>In House Quick Print Service</li
></ul><br/>

And the CSS:

#top-index {
list-style-type: none;
width: 318px;
margin: 0px 3px 0px 5px;
padding: 0;}

#top-index li {
background: url(../images/bullet.jpg) no-repeat top left;
font: bold small-caps 12px/20px Verdana, Helvetica, Arial, sans-serif;
padding: 0px 0px 2px 16px;
width: 150px;
float: left;}

html>body #top-index li {
width: 140px;}

#top-index li.last {
float: left;
width: 100%;}

#top-index br {
clear: left;}

Yes, there's a hack in there that I'm sure I'll hear about, but since this is the first time I've posted actual code, PLEASE be gentle. If you have a better solution, feel free to post it!