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
conjure the occasional portmanteau. Besides web, I am also a photographer. At one point, I was actually going to school for photography, but a 
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.
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.
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.
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
It’s perfect!! Thank you so much, Matt.
This may seem creepy, but I think I love you. This is exactly what I needed to know!
Creepy? Ok maybe a little
. But I’m glad I could help.
This is great.
Exactly what I wanted to do on my posts.
Thank you! So much simpler than many alternatives.
I have been searching for days to make colums, good script thanks, and easy to apply !
I am so EXCITED that you posted this! However, I’m trying to make columns on a wordpress page using your instructions, with the added complication of images along with the text for each bulleted item.
Is it possible? I’m playing with the alignment/code to try to get the images to line up, but it’s not working.
Any tips?
Lahesha -
Glad you find this useful. If you would like, you can email me ( matt [at] mattdanner [dot] net ) with the url of your problem and I can try to take a look at it for you.
-matt
Thank you so much Matt. This is what i have been looking for and so thankful. Am working on my website now and it has really helped me. Thank Once again.
Neat and simple.
Great work.
Hola Matt:
Muchas gracias por tu información. Me fue muy útil.
Saludos desde Argentina
Jorge
Thank you so much. This is just what I was looking for.
Awesome. I’ve tried lots of suggestions and plug-ins that work but they stop other plug-ins working on the same page.
This is a simple fix and works a treat.
Thanks and respect,
Ash
Hi, thanks for this code! I am wondering if there’s anyway to remove the dots next to each item? Thanks!
Katy -
Yes. Change each
<ul>to look like this:<ul style="list-style-type: none;">-matt
Got it! Thanks! Just one more question. What if I wanted to do four columns? Would I just adjust the %s?
Yes, simply adjust the %s and number of divs.
Hi Matt I used your code an is it possible to add hover and a color change to it.
Thank You
VRY
VRY –
You can add any additional CSS that you would like. You can either add it by using inline style ex:
<div style="my style goes here">or by adding classes to the div and adding the css in your stylesheet.-matt
Nice Very good Thank you
Thanks for this idea! I was laboriously using tables. You can actually float the middle one right or left, or float them all right or all left.
Finally, found simple straight forward html code for 2 columns for use on Ebay listing – thanks a mill
thank you thank you thank you this is amazing!!! got rid of the bullet points though
Thanks a lot for this tip. I just put into action and worked great
I am trying to use this for my tumblr to get more than one column on my tumblr and it is not seeming to work, help!
DUDE, i don’t know why but this was so hard for me to find a simple solution to. A million thanks to you!
Yes! You rock! Thanks for this easy and very useful code.
This is fab!! Is there a way to remove the bullet points? they look messy on my links tab
Alice -
Change each
<ul>to look like this:<ul style="list-style-type: none;">-matt
I used this code for some button links in a widget sidebar. Thank you soooo much for this. I had spent all day trying to figure out how to get it to work. Works great. Since I used graphic buttons with a link in my columns, there is a little too much spaces between the “rows.” Is there a way to shrink that down and have my buttons closer together (from top to bottom)?
I tried your coding with the div’s on my table of content. It works perfect in Chrome, but in Firefox and Explorer, the RH column appears under the LH column to the RH side. I coded both div’s with valign=”top”to no avail.
Plse advice
nice , tutorial exactly what i was looking for
thanks Matt
So helpful – thanks!
how do you loose the bullet points? in other words, how can I make the bullet points disappear?
thanks!
Jack -
Change each
<ul>to look like this:<ul style="list-style-type: none;">-matt
I used your code for 3 columns, but the data does not divide evenly into 3, and because of that the text underneath the columns is running up into the columns. Is there anything special I have to do if the the data in the columns is not going to be even? thanks!
Thank you so much for this! I’m new to HTML and this helped a lot.
This is great! The only problem I am having is that when I put the code in there seems to be a large gap between my title and the lists and I cannot seem to find out how to fix it in the code…
Hi – thankyou!
If I wanted to number the 2 columns to go from 1-10 how would I do that? Currently, when I click on number bullets in the wysiwyg they go from 1-5 in each column.
Thanks for your help.
okay im totally dumb for html, so im stucked -.- how do I put pictures in? so I have like pictures, not item1, item 2 etc etc ? :S
This is perfect. I’m having a problem with the next paragraph after the 3 column list. It is wanting to be up and right aligned with the bottom of the right, third column. Its not bulleting but it is starting there as if it were the next in the list. What can I do to help get it moved down to its own spot?
Here is the post I’m having trouble with.
Thank you!
Mandy
Hey Matt,
First off, thank you so much for posting this – it’s such a huge help. I’ve used the two column code in WordPress, but unfortunately when I input text below the columns, it keeps wrapping around the column on the left. I’ve tried overriding this by inserting between the divs, but then that throws the right column out of alignment. Do you happen to know of any other way that I can override the word wrapping? I’m a bit of an HTML novice so forgive me if I’m overlooking something obvious here. Thanks for your help!
Sorry, I meant to say by inserting br clear=”left” between the divs.
thank you so much
it was a big help
Finally someone that speaks human language. Thanks a lot!
Hi Matt,
Thanks for showing the simple way to make two columns by html. But what to do if I want the two columns to be centered with a specified gap?
Appreciate the reference!
Thanks! Bad ass tip!, got me away from those evil table codes.
how can i remove the bullets?
Thanks very much for the code! Works great!!
Hi Matt,
Is there a way to put more space between the two columns so that they aren’t so cramped? Or maybe a bar/divider?
Thanks.
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.