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

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

Comments

  1. Jamika says:
    January 21, 2013 at 4:54 pm

    u saved my life thanks some much….

    Reply
  2. Harmik says:
    February 1, 2013 at 5:32 pm

    Hi Matt,
    Thank you for you sweet code. I was wounder if I could add dots or dashes in space between items

    Reply
  3. John Gusty says:
    March 7, 2013 at 10:02 am

    It must be nice to know that 4 years later… this post is still helping people. SAVED MY MORNING! Thanks Matt. You’re awesome.

    Reply
  4. Sue K says:
    March 26, 2013 at 2:27 pm

    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
  5. Kathy Porter says:
    March 31, 2013 at 12:40 pm

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

    Reply
  6. Jesper Pedersen says:
    April 5, 2013 at 6:22 am

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

    Reply
  7. Zette Harbour says:
    April 5, 2013 at 8:27 pm

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

    Reply
  8. Pascal says:
    April 8, 2013 at 8:26 am

    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
  9. Ruby says:
    April 13, 2013 at 12:54 pm

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

    Reply
  10. slow says:
    April 17, 2013 at 9:49 am

    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 😉

    Reply
  11. slow says:
    April 17, 2013 at 9:52 am

    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/

    Reply
  12. Anthony says:
    April 22, 2013 at 1:30 am

    hey, the code doesn’t work in IE8…

    Can you give a solution please?

    Reply
  13. Henrietta says:
    April 26, 2013 at 12:23 am

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

    Reply
  14. tricia says:
    May 4, 2013 at 8:04 pm

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

    Reply
  15. Singularity Utopia says:
    May 30, 2013 at 12:41 pm

    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
    • Singularity Utopia says:
      May 30, 2013 at 12:45 pm

      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. Danh says:
    June 1, 2013 at 2:40 pm

    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
  17. Dhandabani says:
    June 7, 2013 at 5:16 am

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

    Reply
  18. Sjoerd says:
    June 18, 2013 at 11:33 am

    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. uba says:
    July 16, 2013 at 10:23 pm

    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. uba says:
    July 16, 2013 at 10:24 pm

    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. uba says:
    July 16, 2013 at 10:27 pm

    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
  22. Radhika Ramana says:
    August 25, 2013 at 7:38 pm

    Thank you sooooo much!!!!! There were so many complicated solutions out there. You made it incredibly simple. 🙂

    Reply
  23. Milan says:
    November 27, 2013 at 4:09 pm

    hey Matt, so I’m a newb at this stuff and I was just wondering where do I put this? XP It’ll take me forever to figure it out!

    Reply
  24. Rebekka says:
    February 3, 2014 at 3:06 pm

    Hi, I was just wondering if there is any way I can remove the dots? Thanks for this very helpful and simple solution!

    Reply
  25. Rebekka says:
    February 3, 2014 at 3:18 pm

    OH, never mind, I figured it out! I just used style=”list-style: none;” in the tag!

    Reply
  26. Bobbysony says:
    February 12, 2014 at 9:20 pm

    Thank you man. was really helpful

    Reply
  27. Josh says:
    February 15, 2014 at 6:25 pm

    Still good in 2014! Thanks 🙂

    Reply
  28. Susan says:
    March 16, 2014 at 3:21 am

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

    Reply
  29. Christin says:
    May 30, 2014 at 9:45 am

    Thanks so much!

    Reply
  30. Martin says:
    April 8, 2015 at 4:06 am

    I have tried pasting loads of suggestions for a two column format into the HTML option on Snackwebsites. This one works. Thanks

    Reply
  31. Gourav says:
    July 12, 2015 at 2:17 am

    thank you

    Reply
  32. Jay Sirotin says:
    August 25, 2015 at 10:14 pm

    Thank you so much! it works in mobile as well! Looked for this solution for a while now. Great solution!

    Reply
  33. shannon says:
    December 7, 2015 at 10:53 am

    Thanks, you rock!

    Reply
  34. Victor John says:
    January 3, 2016 at 12:02 pm

    Thanks, very helpfull

    Reply
  35. Susan says:
    January 4, 2016 at 11:27 pm

    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
  36. Aidana says:
    January 8, 2016 at 3:09 pm

    What if I don’t want the bullets or my text style and size to change?

    Reply
  37. Emma says:
    April 25, 2016 at 5:42 pm

    Wonderful! It worked! Thank you so much!!!

    Reply
  38. David Burchett says:
    July 5, 2016 at 6:40 am

    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
  39. Rafael says:
    July 6, 2016 at 7:25 am

    Thanks by you help.
    It was helpful in my Rmarkdown slides!
    Best Regards

    Reply
  40. riva says:
    September 15, 2016 at 8:25 am

    Awesome!! This is very useful. Thank you soooo much.

    Reply
  41. Huzaifa says:
    October 25, 2016 at 5:29 pm

    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
  42. Mark | @machkeys says:
    October 28, 2016 at 3:19 am

    This came in handy instantly for me.

    Thanks for the template & quick help!

    – Mark | machkeys.com

    Reply
  43. Grant says:
    January 16, 2017 at 4:43 pm

    Thank you for this easy to use multi column list code!

    Reply
  44. Oscar71 says:
    January 30, 2017 at 6:16 am

    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. Pat says:
    February 15, 2017 at 11:10 am

    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
  46. PrimaQual says:
    May 11, 2017 at 8:31 am

    Simple and most importantly, WORKED! Even in 2017… lol…

    Reply
  47. Shahan says:
    May 12, 2017 at 8:43 am

    Thanks Matt, after using your two column code several times now (I’m too lazy to write it myself) I appreciate it!

    Reply
  48. Terrence Kent says:
    August 31, 2017 at 7:01 am

    Hey Matt,

    This has worked out great for me, just wanted to say thanks.

    Reply
  49. BT says:
    September 11, 2017 at 3:03 am

    Thanks! Really Helped.

    Reply
  50. Anand says:
    January 3, 2018 at 3:49 am

    That was just simple and unbreakable.. Thanks Cheers Mattdanner.net

    Reply
« Older Comments
Newer Comments »

Leave a Reply Cancel reply

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

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