css

Creating Multi-column Lists using CSS

11
May 17th, 2010 in Web Development by post Rick

Web development still has a few limitations, more than we would like to admit… but with a little creativity and some css know-how you should be able to find a solution for most problems.

I recently found myself in need of a multi-column list that was still using semantic markup. It is very important that you learn to do EVERYTHING in semantic markup, while this may not seem like a big deal if you are writing the code by hand, it becomes much more clear when you are using content that is generated by a CMS. In these cases, creating a multi-column list is not as easy as just creating multiple lists and positioning them accordingly, instead you have to rely on repositioning the existing markup.

I have used a few different techniques, to show you how I managed to accomplish this:

Technique 1 : Floated list items

This is probably the best solution of the bunch but, as you will see later on ,it is only good for unordered lists where the actual list order does not matter.

To get started first you need some semantic code:
<ul>
<li>List Item </li>
<li>List Item </li>
<li>List Item </li>
<li>List Item </li>
<li>List Item </li>
</ul>

Now we need to use CSS to make it look the way we want :
ul{
list-style-type:none;
width:500px;
}
li {
float:left;
margin: 10px 0 0 0;
padding: 0 10px 0 0;
width:199px;
}

Example

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Alright so the trick is to have a set width on the containing ul tag. Then to also set a width on the li’s within the ul. The last important step is to make sure that the list items are floated left, this causes them to line up in neat rows.

Like I said earlier this is really good for, unordered lists but what happens if you try to use it on an ordered list.

Example

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

As you can see it is definitely not ideal.

Technique 2 : Using classes and margins

If you can manipulate the markup, meaning that it is not being generated, then it is possible to add classes to each of the columns and place them accordingly using margins.

Once again we will start with some markup:
<ul>
<li class="alpha">List Item </li>
<li class="alpha">List Item </li>
<li class="alpha">List Item </li>
<li class="beta first">List Item </li>
<li class="beta">List Item </li>
<li class="beta">List Item </li>
<li class="charlie first">List Item </li>
<li class="charlie">List Item </li>
<li class="charlie">List Item </li>
</ul>

As you can see the markup is starting to look a little messy (note the classes and the multiple classes on the first item in each column).The css to make this into columns would look like this:
li {
width:120px;
margin:15px 0 0 0;
padding:0 10px 0 0;
line-height:15px;
position:relative; /* IE needs this in order to recognize links in all columns */
}
.alpha {
margin-left:0;
}
.beta {
margin-left:150px;
}
.charlie {
margin-left:300px;
}
.first {
margin-top:-105px;
}


Example

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Ok lets go over it. The css that targets all the list items (li) sets all the widths, margins and paddings for the entire list. While this is important for the other techniques with this one it is critical because we need to know exactly where to set our margin-left at.

What makes this example particularly interesting is the ‘first’ class. This is what moves the columns up so they align nice and neat and are not staggered down the page. Since we have the same amount of negative margin on each list I can re-use the same style on column 2 and 3. To calculate the amount needed for the negative margin is easily calculated with some simple math. We know we have 4 items in each column, we will also need 3 spaces in between our items. To keep everything uniform we will make each of these 15px, (line-height and margin-top settings) 15 x 7 = 105px.

This technique also works nicely for ordered list as you can see in the example below. Although I did find that I had to add an extra 2px of margin to each ordered list item so the negative margin is 113px on the ordered list. Unfortunately I could not find any documentation on why this is to share.

Example

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item
  8. List Item
  9. List Item
  10. List Item
  11. List Item
  12. List Item

Technique 3 : Added classes

The previous 2 techniques are still not ideal because most CMS’s do not allow you to edit the markup directly, most of them do however add unique id’s or classes to each generated list items. We can use this generated code and display our list the way we want. Here is some example code that could be generated by WordPress.
<ul>
<li class="page_item page-item-2">List Item</li>
<li class="page_item page-item-4">List Item</li>
<li class="page_item page-item-6">List Item</li>
<li class="page_item page-item-8">List Item</li>
<li class="page_item page-item-10">List Item</li>
<li class="page_item page-item-12">List Item</li>
<li class="page_item page-item-14">List Item</li>
<li class="page_item page-item-16">List Item</li>
</ul>

And here is the css we could use to make this line up into 2 columns:
.page_item {
margin:15px 0 0 0;
line-height:15px;
}
li.page-item-2,li.page-item-4,li.page-item-6,li.page-item-8 {
margin-left:0;
}
li.page-item-10,li.page-item-12,li.page-item-14,li.page-item-16 {
margin-left:200px;
}
li.page-item-10 {
margin-top:-105px;
}

Example

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

So by grouping several list items together we target entire columns and set the appropriate margins to line up the columns. We also have to target the first item of each column, if we had several columns we could also group them in the css file. Like technique 2 we calculate the negative margin on the second column by adding the list items and spaces together. 4 list items, 3 spaces each are 15px high so the total is 7 x 15 or 105px. This technique also works nicely with ordered lists.

Example

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item
  6. List Item
  7. List Item
  8. List Item

Summary

These are just a few samples of possible solutions, they seem to work pretty well for me. If you have any solutions that I may have overlooked please add them to the comments and share them with other

Further resources

No related posts.

11 Responses to “Creating Multi-column Lists using CSS”

  1. Nicola Pressi said...

    I prefer to break the ul and float it to achieve the same result of tec. 2 and 3

  2. adsl viettel said...

    Oh it’s look great, that’s what i need for my website.

  3. Deluxe Blog Tips said...

    The 1st method looks good. The 2nd method can be done automatically (adding classes) by using PHP or something like that, while the last method is very handy.

    If you’re using CSS3, you can use new multi-column feature to make things done.

  4. cap quang viettel said...

    great. it is very useful for my website

  5. Ai~ said...

    Thank you for this tutorial! Very useful indeed :)

  6. malucka said...

    hi

    ok i used first example but now my text wrap as on example so how can i fix column size

    [icon] List Item List Item [icon] List Item List Item
    List Item Item List
    [icon] List Item List Item [icon] List Item List Item
    List Item Item List

    so how can i fix column size to get this result

    [icon] List Item List Item [icon] List Item List Item
    [icon] List Item List Item [icon] List Item List Item

  7. Rick said...

    Hi there,
    I am not sure exactly what you are asking for based upon your comments. But, here are a few things to try.
    Add a clear to your columns, this can get a bit tricky and you might have to play with it a bit, also setting a height to you list item will help. As it will make sure that all tags are the same height regardless of content.

    hope that helped
    Rick

  8. mishkin said...

    why the second technique doesn’t work with ie. for me,it creates columns in chrome but not in ie. thnx

  1. Creating Multi-column Lists using CSS | RefreshTheNet
  2. Weekly Design News – Resources, Tutorials and Freebies (N.38) - Speckyboy Design Magazine
  3. [Linkdump #13] CSS, czyli Co Si? Sta?o z moim stylem? ;] | Tomasz Kowalczyk

Leave a Reply