Achieve Two Column Layout with UL list element

Had an interesting challenge posed to me today...Can you achieve a 2 column layout with a single Unordered List <UL>? I am happy to say that the answer is...Yes! Ok so let's get right into the code as that will speak more volumes than I can muster on this topic.

First the HTML:

<ul class="colums-two">
      <li class="colleft">column 1</li>
      <li class="colright">column 2</li>   

      <li class="clr"><br class="clr" /></li>

      <li class="colleft">column 3</li>
      <li class="colright">column 4</li>

      <li class="clr"><br class="clr" /></li>

      <li class="colleft">column 5</li>
      <li class="colright">column 6</li>

      <li class="clr"><br class="clr" /></li>
    </ul>

Pretty standard really...(thx Leonard =)

Now the CSS:

ul.colums-two {
   list-style-type: none;
   margin: 0;
   padding: 0 0 0 0; }

li.colleft {
   width: 75px;
   float: left;
   margin: 0;
   padding: 0 5px 3px 0; }
      
li.colright {
   float: left;
   margin: 0;
   padding: 0 0 3px 0;
   width: 75px; }

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
 }

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
 }

 

That's it! A two column solution for a single list, special thanks to Monorom for getting me pointed in the right direction.

Here's a jsFiddle to see it in action: http://jsfiddle.net/N3U5Z/