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.