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

110 Comments
Categories : WordPress
Tags : , , , , , ,

Comments

  4. 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!

    Reply

  8. Hi Matt
    I’m not a web designer, I just need to get into it some times for my personal websites. I needed a 3 column layout and your page just provides me with what I need. There is a link to your page here http://multiskillz.tekcities.com/io101_site_news21features.html for the Sunday, 7 April 2013 post and the 3 column pages in different sections but currently starting from here http://multiskillz.tekcities.com/k2500_0vbaMenu.html
    Let me know if you want/don’t want something from this initiative.
    Thanks
    Pascam

    Reply

  15. Very useful, but I’m using three columns in three rows which causes a slight problem for the new row because I think the “float” parameter does not give a clear end-line break, thus there is a tendency for the second and subsequent rows to float up into the row above, but I kind of fixed this by putting in about ten s after each row, although I wonder if there is a neater way? Here is the page in question: http://futuristicreader.blogspot.com/p/index.html

    Reply

    • That’s ten break tags (a less than sign, then br, then a greater than sign) but I used the code which was auto-removed from my comment.

      Reply

  16. 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.

    Reply

  18. Hi,

    Thanks, it useful.
    Still i have a little problem.
    I’m making a responsive website and thats the first time for me. 😛
    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 😀

    Reply

  19. Thank you for this mate. You are a star. Spent almost a day trying to work out how to get this right.

    You kept it simple. Elegant solution. So grateful.

    Reply

  20. Thank you for this mate. You are a star. Spent almost a day trying to work out how to get this right.

    You kept it simple. Elegant solution. So grateful.

    (And I normally eschew comments).

    Reply

  21. Thank you for this mate. You are a star. Spent almost a day trying to work out how to get this right. There are so many overcomplicated solutions out there. You kept it simple.

    I like your style. So grateful.

    (And I normally eschew comments).

    Reply

  28. Thanks so much. Having gone through various more complicated methods that I couldn’t get to work, this is just what I needed

    Reply

  35. Very simple and easy to understand. Thanks!

    I would like to do this but with a photo in the right column. How would I float a picture to the right? I thought this would work for a student project I’m doing in MailChimp, but the image isn’t showing up. What am I forgetting?

    The Graphic & Interactive Design (GID) program at Mount Wachusett Community College offers you the tools, skills and knowledge to become an innovative, creative thinker and leader in business marketing, promotional design, advertising, brand and corporate design, publication design, web design and motion graphics.

    LESLIE CULLEN,  Department Chair

    Reply

  38. Could be missing something but it seems to fall apart when there are less items on the right side than there are on the left. So if you have multiple 2 col rows and say, the top row has only one item on the right col then items from the left bleed into it.

    Left Item 1
    Left Item 2
    Left Item 3

    Right Item 1

    Reply

  41. Hi, I need to create 2 columns, but in such a way that if the window is narrowed down, the second column becomes a new row.

    Reply

  44. Amazing – here I am in 2017 using a pre-built template but needing to add 2 column price list and bingo this page came up in a search and I have created what I needed – many thanks!

    Now, just to find a way to remove the bullet points!

    Reply

  45. Thank you Matt.. searched for this solution for 2-3 hours and yours was the most straightforward and it worked.

    Thank you again from the future 🙂

    Reply
« Older Comments
Newer Comments »

Leave a Reply

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

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