Multiple column lists using one <ul>

This is a quick, simple tutorial on how to create multiple column lists by only using one ul. Often is the case when you’d want multiple lists side-by-side, but you end up using markup like <ul class="col"> in order to get several lists sat next to each other. However, by simply floating lis left and setting their width to the correct percentage (two columns = li{width:50%;} and so on), you can attain a multiple column list pretty easily.

View demo

The trick here is to force the list to break at the right point. If you want two columns, you need to float the list items left and set them at 50% width, therefore the list items will only ever fit two side-by-side, then begin again on the row beneath. By that token, three columns would require a width of 33% and floated left, four would be 25% and so on.

The code

Both the markup and CSS for this is incredibly simple, nothing fancy, no CSS3, nothing progressive, just basic styling applied to lean markup.

The markup

The markup for this is just a simple ul, thus:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

And to make this into a multiple column list:

ul{
  width:760px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
li{
  line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
#double li  { width:50%;} /* 2 col */
#triple li  { width:33.333%; } /* 3 col */
#quad li    { width:25%; } /* 4 col */
#six li     { width:16.666%; } /* 6 col */

When to use this

Use this wisely… It displays content in an ambiguous manner and should not be used where order of reading is imperative.

This method should only be used if the lists content doesn’t require any specific ordering as the markup is written linearly and the list is displayed in a matrix. As you can see, the way the content is displayed means it can be read across»down»across or down»up»down. This means that the way you write your content is not necessarily the way it will be read. In my example this isn’t an issue, as the content can safely be read in any order.

Tweet Follow @csswizardry

By Harry Roberts on Thursday, February 11th, 2010 in Web Development. Tags: CSS, HTML, Lists | 15 Comments »

15 Responses to ‘Multiple column lists using one <ul>’

brett said on 14 February, 2010 at 6:12 pm

thank you,
i’d been thinking that there must be a way to show tables in a simpler way….but could never find the way out….

the markup with ul li is better than using tables and i’d implement it hence forth in my web dev. projects for simple tables….

thanks a lot
regards,
brett a.k.a. bharat khiani (freelance web developer).
Harry Roberts said on 15 February, 2010 at 9:13 am

Hi Brett,
I’d sincerely recommend against using lists to layout tables, as per http://csswizardry.com/2009/12/typographic-work-planner/comment-page-1/#comment-30

Harry
Andrzej O. said on 15 February, 2010 at 12:48 pm

This is so simple that I never thought that someone may not know that :-)

But if you want to put tabelar data then you should use tables if you prefer to be semantic in 100%.
viktor said on 15 February, 2010 at 1:08 pm

http://www.csshrou.sk/x-stlpcovy-zoznam-s-jedinym-olul-tagom/
Burton Haynes said on 26 February, 2010 at 5:04 am

I am a huge fan of everything related to typography, keep up the good work
Hudson said on 28 May, 2010 at 2:45 pm

This is so simple, so perfect!

I’m looking to do this with nested uls, preferably without using negative margins to keep the left side flush.

Any suggestions?
Coffee Lover said on 18 October, 2010 at 9:56 am

This worked like a charm, and you can even over write some of the list items to be a larger width, and in wraps. I added for a single item to have take up two columns, thanks
VirtualFlavius said on 23 March, 2011 at 10:24 pm

How would you cause this solution to order list items from top to bottom, then from left to right?

Kind regards,
VirtualFlavius
alex said on 11 April, 2011 at 5:13 am

Simple, elegant solution! That’s how CSS should be. Thanks
Pablinho said on 13 June, 2011 at 6:19 pm

Interesting… although i’m looking for a way of doing this but ordering them vertically, and once they get to the end of the container, it jumps to the next column.. any suggestions ?

thanks in advance.
John said on 20 June, 2011 at 2:44 pm

Great article. I’ve got the same issue as Pablinho… anyone got any other ideas?

Cheers
Damian said on 25 July, 2011 at 6:09 am

Any ideas how to get this to work for liquid layout?

Damian
Copywriting Newcastle said on 3 October, 2011 at 2:20 pm

Thanks for this solution, just wondering if you’ve got any ideas for doing it down over rather than float left so that xhtml sits under css just for a store where items need to be in alphabetical order. I’ve tried css3’s multi columns which works but it doesn’t work on old browsers.

Any ideas would be great.
Maikel said on 22 November, 2011 at 6:09 pm

If you want to display “bullet points”, you could try:
li {
line-height:1.5em;
float:left;
text-align:left;
display:list-item;
list-style-type:disc;
list-style-position:inside;
}
RCC Graphic Designs said on 26 February, 2012 at 6:39 pm

Thanks, great site and article. I came across your website looking for a solution to controlling how the list is displayed (top to bottom, left to right) as VirtualFlavius, Pablinho and John pointed out. I found other solutions but they all require extra coding in PHP or such. Is there a way of handling lists via CSS only, or is it (maybe) impossible? Thanks again for sharing.

Rommel

View demo

The code

The markup

When to use this

15 Responses to ‘Multiple column lists using one <ul>’

Leave a Reply