Tuesday, June 7, 2011

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-typenone;
   margin0;
   padding0}

li.colleft {
   width75px;
   floatleft;
   margin0;
   padding5px 3px 0}
      
li.colright {
   floatleft;
   margin0;
   padding3px 0;
   width75px}

li.clr {
   displayinline;
   margin0;
   padding0;
 }

br.clr {
   clearleft;
   width1px;
   font-size:1px;
   margin0;
   padding0;
   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/