Matt Danner
  • Blog
  • Contact
  • Twitter
  • Instagram
 October 1, 2009

Two Column Lists Using HTML

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

114 Comments
Categories : WordPress
Tags : Community, html, html columns, matt danner, night photography, two column li, WordPress
← Next Post
Previous Post →

Comments

  1. Jason says:
    April 25, 2019 at 4:56 pm

    Thanks, still works in 2019

    Reply
  2. Lisa Campbell says:
    May 31, 2019 at 6:43 pm

    Worked like a charm! Thanks Matt!

    Reply
  3. stacy says:
    July 30, 2019 at 12:11 pm

    OMGGG.. THANK YOU SO MUCH.. I DON’T USE A PLUGIN

    Reply
  4. Marian says:
    August 23, 2019 at 1:02 am

    works perfectly!

    Reply
  5. ben says:
    September 3, 2020 at 2:23 pm

    amazing works like a charm

    Reply
« Older Comments

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

The Internet Home of Matt Danner Copyright © 2023
iThemes Builder by iThemes