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
Thanks, still works in 2019
Worked like a charm! Thanks Matt!
OMGGG.. THANK YOU SO MUCH.. I DON’T USE A PLUGIN
works perfectly!
amazing works like a charm