HeadsetOptions // promotes individuals and businesses launch, grow or reinvent themselves by leveraging the power of web design, SEO and WordPress to create brand
identities and gain market share

Display Continuous List in Two Columns

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.

// Tagged CSS, Code, Design, HTML, Web, Web Design, hacks, how to, resources, techniques, tips, xhtml // 05.05.2008 at 10:51 am //