Two Column Lists Using HTML

Posted by on October 1, 2009 with 70 Comments

I know there are a million methods of breaking a list into two columns, but many of them involve additions to the CSS or new tables to be created.  But I like a different way.  The markup is all html, and it can easily be used in WordPress posts (using the view HTML tag at the top of the post editor).  The markup is pretty simple.  It is basically just two divs, one floated left and one floated right, with each only getting a percentage of the container.  Below is the markup in real time.

<div style="float: left; width: 50%;">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
<li>Left Item 4</li>
<li>Left Item 5</li>
</ul>
</div>
<div style="float: right; width: 50%;">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</li>
<li>Right Item 4</li>
<li>Right Item 5</li>
</ul>
</div>

Live on the site it will look like:

  • Left Item 1
  • Left Item 2
  • Left Item 3
  • Left Item 4
  • Left Item 5
  • Right Item 1
  • Right Item 2
  • Right Item 3
  • Right Item 4
  • Right Item 5
This simple little bit of code can be used to make as many columns as you want.  I like the freedom to make things as ugly as I want. All columns except the last (furthest right) need to be floated left.  And don’t forget to change your percentages accordingly.

UPDATE:

Below is the actual code for doing three columns.  This is at the request of Bradford Ulrich.

<div style="float: left; width: 33%;">
<ul>
<li>Left Item 1</li>
<li>Left Item 2</li>
<li>Left Item 3</li>
<li>Left Item 4</li>
<li>Left Item 5</li>
</ul>
</div>
<div style="float: left; width: 33%;">
<ul>
<li>Middle Item 1</li>
<li>Middle Item 2</li>
<li>Middle Item 3</li>
<li>Middle Item 4</li>
<li>Middle Item 5</li>
</ul>
</div>
<div style="float: right; width: 33%;">
<ul>
<li>Right Item 1</li>
<li>Right Item 2</li>
<li>Right Item 3</li>
<li>Right Item 4</li>
<li>Right Item 5</li>
</ul>
</div>

Notice that only the last column is floated right.  Only the furthest right div needs to be floated right. All others should be left, in order you want them to appear.  The percentages also change to allow each to have the appropriate amount of room.  If you had four, guess what the percentages would be. RIGHT! 25%.   Here is what that code looks like again.
  • Left Item 1
  • Left Item 2
  • Left Item 3
  • Left Item 4
  • Left Item 5
  • Middle Item 1
  • Middle Item 2
  • Middle Item 3
  • Middle Item 4
  • Middle Item 5
  • Right Item 1
  • Right Item 2
  • Right Item 3
  • Right Item 4
  • Right Item 5

-matt

Be Sociable, Share!
Filed Under: WordPress

Get Updates via Email:


Don't miss a single post. Enter your email below to receive my latest blog post via email.


And... Follow me on Twitter.

Comments

  1. Sue K says:

    I agree with John, after so many years, this is still helping people! Thank you! Not a code person and understood it perfectly! I am having one slight issue, do I have to have equal parts on each side? I’d like to have let’s say 3 items on the left and 2 on the right. Doesn’t seem to want to work like that. Any help/advice you have would be much appreciated!

  2. Kathy Porter says:

    Wonderful! Those simply explained bits of code were just the ticket!!

  3. Awesome page, just used it to create iFrame tab in Facebook page. Thank you very much!

  4. Thank you! Wow, this worked and was soooooo easy.
    sincerely,
    Newbie

  5. Ruby says:

    Can you please post the html coding for colums with pictures on one side and text on the other?

  6. slow says:

    Thanks for this, Matt.

    Can anyone tell me why my right hand column is displaying underneath my left hand column instead of beside it?!

    It’s on this page here:
    http://www.cissystems.co.za/sectors/warehousing/

    Thanks for the help ;)

  7. slow says:

    Hmm. No idea why (I’m not that web savvy) but when I changed the left width to 25% and left the right width to 50%, it all laid out fine. Hope this helps someone else ;)

    You can see what I mean here:
    http://www.cissystems.co.za/sectors/warehousing/

  8. Henrietta says:

    Thank you thank you thank you!
    Works on blogger, great stuff.

  9. tricia says:

    I agree with John Gusty…a simple solution, other posts have made so complicated. MADE MY EVENING!

  10. Danh says:

    This isn’t working for me; I’m new to html (and tumblr) and I’m trying to make ONE page that has one column filled with pictures, and another filled with paragraph descriptions.

  11. Dhandabani says:

    Thank you so much.. i wasted half day to find out this… Thank you much……..

  12. Sjoerd says:

    Hi,

    Thanks, it useful.
    Still i have a little problem.
    I’m making a responsive website and thats the first time for me. :P
    On a PC the list looks good (2 col) but when i look at it on a mobile screen its overlapping.
    Can you tell me how i can fix that?
    I want it to be one list on mobile devices.

    Thanks again :D

Leave a Reply