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