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>

Pretty standard really...(thx Leonard =)

Now the CSS:

ul.colums-two {

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

li.clr {

br.clr {


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/

No comments:

Post a Comment