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
UPDATE:
<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>
- 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
u saved my life thanks some much….
Hi Matt,
Thank you for you sweet code. I was wounder if I could add dots or dashes in space between items
It must be nice to know that 4 years later… this post is still helping people. SAVED MY MORNING! Thanks Matt. You’re awesome.
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!
Wonderful! Those simply explained bits of code were just the ticket!!
Awesome page, just used it to create iFrame tab in Facebook page. Thank you very much!
Thank you! Wow, this worked and was soooooo easy.
sincerely,
Newbie
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
Can you please post the html coding for colums with pictures on one side and text on the other?
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 😉
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/
hey, the code doesn’t work in IE8…
Can you give a solution please?
Thank you thank you thank you!
Works on blogger, great stuff.
I agree with John Gusty…a simple solution, other posts have made so complicated. MADE MY EVENING!
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
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.
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.
Thank you so much.. i wasted half day to find out this… Thank you much……..
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 😀
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.
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).
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).
Thank you sooooo much!!!!! There were so many complicated solutions out there. You made it incredibly simple. 🙂
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!
Hi, I was just wondering if there is any way I can remove the dots? Thanks for this very helpful and simple solution!
OH, never mind, I figured it out! I just used style=”list-style: none;” in the tag!
Thank you man. was really helpful
Still good in 2014! Thanks 🙂
Thanks so much. Having gone through various more complicated methods that I couldn’t get to work, this is just what I needed
Thanks so much!
I have tried pasting loads of suggestions for a two column format into the HTML option on Snackwebsites. This one works. Thanks
thank you
Thank you so much! it works in mobile as well! Looked for this solution for a while now. Great solution!
Thanks, you rock!
Thanks, very helpfull
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
What if I don’t want the bullets or my text style and size to change?
Wonderful! It worked! Thank you so much!!!
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
Thanks by you help.
It was helpful in my Rmarkdown slides!
Best Regards
Awesome!! This is very useful. Thank you soooo much.
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.
This came in handy instantly for me.
Thanks for the template & quick help!
– Mark | machkeys.com
Thank you for this easy to use multi column list code!
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!
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 🙂
Simple and most importantly, WORKED! Even in 2017… lol…
Thanks Matt, after using your two column code several times now (I’m too lazy to write it myself) I appreciate it!
Hey Matt,
This has worked out great for me, just wanted to say thanks.
Thanks! Really Helped.
That was just simple and unbreakable.. Thanks Cheers Mattdanner.net