Two Column Lists Using HTML

Posted by Matt on October 1, 2009 with 7 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
Share and Enjoy:
  • StumbleUpon
  • Twitter
  • Facebook
  • del.icio.us
  • Digg
  • Google Bookmarks
  • Print
  • email
  • RSS
  • Tumblr
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. I love you. I’ll be using this soon. How do you do more than 2 columns? Can you post an example of that? I’m code dumb.

  2. Matt says:

    There you go Brad. Clean and simple. Let me know when you use it so I can see it in action. We used this exact code on the “Who’s Here” page on CatalystCouch.com.

  3. Jill Anderson says:

    Thank you Matt. This is exactly what I was searching for this morning — although I haven’t got it to work yet. I copied in your code and replace Left Item #/Right Item # with my data and yet I still have only one list. I am using WordPress and am in the HTML tab of a new post. Hmmm….will keep trying.

  4. Matt says:

    Jill, I meant to make a note for everyone about this. A friend of mine was using the code and we discovered that if you just copy and paste the code, it will not work. I am pretty sure the problem lies in the quotes. When copied, they are not correct. Go back to your code and just remove the quotes and add new ones. That little fix should help.
    -matt

  5. Jill Anderson says:

    It’s perfect!! Thank you so much, Matt.

  6. Anne says:

    This may seem creepy, but I think I love you. This is exactly what I needed to know!

Leave a Reply