Display Continuous List in Two Columns

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

CSS TipsHere’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:

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

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.

Leave a Comments | Trackback | RSS 2.0

  1. 1. Robin | May 5, 2008 #

    Hi, this is awesome. Just FYI, it doesn’t work in feeds. But thanks for this cool trick.

  1. 2. hso | May 5, 2008 #

    @ Robin

    Glad you liked it. The stylesheet info is not packaged within the post, I actually added the code to my theme’s stylesheet for the sake of demonstrating, so yes, it will not work in RSS feeds.

  1. 3. Jason Marsh - Website Designer | May 29, 2008 #

    Jeesh thats short and sweet, pretty awesome!

  1. 4. Display Continuous List in Two Rows As Images » Headsetoptions.org | June 2, 2008 #

    [...] we studied how we can easily display a continuous list in two columns using just CSS. Today, we will use a similar technique to present a continuous list in two rows [...]

  1. 5. emil | July 4, 2008 #

    Thank you so much, I spent entire day, to get this to work and none of it did a trick. This what you did works super, once again thanks you saved my “life”

    Emil

  1. 6. Matt | September 29, 2008 #

    Hello,

    Sorry to contact you via your email, I should have posted it directly here.

    Thanks a lot for this post and code.

    It’s some simple and powerful code, I have been searching for a long time to find something like this.

    I am having one small problem though, even after a long time tweaking the code, I can not get the padding / white space after the list to be equall on Firefox and Internet Explorer. It is much larger on IE.

    This is a problem as the list is in the middle of the page and it somewhat breaks up the design.

    I very much appreciate your time, do you know of a way to solve this?
    Many thanks

  1. 7. hso | September 29, 2008 #

    @ Matt

    FF and IE will not agree, I suggest you use a master CSS reset like the one you can find on Blueprint CSS (use the reset section on top of your style.css).

Have Your Say »

(Required- use your name, not keywords)

(Required- will not be published)

(Optional)

Use SimpleCode while pasting codes.