Creating Two Column Unordered <ul> Lists

November 5th, 2009

Creating Two Column Unordered ListsI’ve been searching like mad how to split an unordered list <ul> into two columns and haven’t found an easy solution.  By using combined info from a few sites I figured out an easy way to do it.  If you already know how to do this then mozie on down folks.  Here it is:

Make a <div class=”double_column_list”> and put a <ul> in it with some list items.   Set the <li> class to display at 50% width and float it to the left.

CSS

.double_column_list li {float: left; width: 50%;} 

HTML

<div class="double_column_list">
<ul>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
<li>Awesome Stuff</li>
</ul>
</div>
  • Awesome Stuff
  • Awesome Stuff
  • Awesome Stuff
  • Awesome Stuff

Boosh, 2 column unordered lists.

Categories: Internet, Tutorials


2 Comments on “Creating Two Column Unordered <ul> Lists” Comments RSS Feed

  1. Susan says:

    I plan to try this out, very cool. When I have wanted two columns in the past, I made a table.
    Then in the table cells unordered lists were made. This method is cool, no need to make the tables. Thanks!

  2. Vernon Young says:

    I am upgrading our web site and I used your
    two column list on one page and it works
    cool. I want to know could I use this in a site map. I tried but it runs together. how do I separate the list. Thanks!
    VRY6

Leave a Reply