Headsetoptions.org Web Design, SEO, WordPress, Etcetera

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Here’s a quick and easy way to present a continuous list in two or more columns without having to hard code it. A recent project required a list of authors across two columns; the author names and links were auto generated using a WP tag so listing them in 2 columns required some simple CSS magic.

A typical list is below.

1. <ul>
2. <li>Web Design Link 1</li>
3. <li>Web Design Link 2</li>
4. <li>Web Design Link 3</li>
5. <li>Web Design Link 4</li>
6. <li>Web Design Link 5</li>
7. <li>Web Design Link 6</li>
8. </ul>

When rendered without any styling, it will appear like this:

• Web Design Link 1
• Web Design Link 2
• Web Design Link 3
• Web Design Link 4
• Web Design Link 5
• Web Design Link 6

Now wrap the unordered list within a div, let’s call the div “twocol” for the sake of this example:

1. <div class=”twocol”>
2. <ul>
3. <li>Web Design Link 1</li>
4. <li>Web Design Link 2</li>
5. <li>Web Design Link 3</li>
6. <li>Web Design Link 4</li>
7. <li>Web Design Link 5</li>
8. <li>Web Design Link 6</li>
9. </ul>
10. </div>

Add this style for class “twocol” in your stylesheet.

.twocol ul { width:400px; } /* this could be any length in px or % */
.twocol ul li { width: 40%; float: left; list-style: circle; padding-left: 18px; margin: 0px;}

Now the new list will look like this:

There you have it, a very simple way to display your lists of any length in two columns. The same method can be used to accomplish any finite number of columns, but with each additional column, the width of each column proportionately decreases.