Wrapping lists into columns

Question

I'm using ColdFusion to populate a template that includes HTML unordered lists (<ul>s).

Most of these aren't that long, but a few have ridiculously long lengths and could really stand to be in 2-3 columns.

Is there an HTML, ColdFusion or perhaps JavaScript (I'm accepting jQuery solutions) way to do this easily? It's not worth some over-complicated heavyweight solution to save some scrolling.

Solution 1

So I dug up this article from A List Apart CSS Swag: Multi-Column Lists. I ended up using the first solution, it's not the best but the others require either using complex HTML that can't be generated dynamically, or creating a lot of custom classes, which could be done but would require loads of in-line styling and possibly a huge page.

Other solutions are still welcome though.

Solution 2

If Safari and Firefox support is good enough for you, there is a CSS solution:

ul {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

I'm not sure about Opera.

Solution 3

There is no pure CSS/HTML way to achieve this, as far as I know. Your best bet would be to do it in pre-processing (if list length > 150, split into 3 columns, else if > 70, split into 2 columns, else 1).

The other option, using JavaScript (I'm not familiar with the jQuery library specifically) would be to iterate through lists, probably based on them being a certain class, count the number of children, and if it is a high enough number, dynamically create a new list after the first, transferring some number of list items to the new list. As far as implementing the columns, you could probably float them left, followed by an element that had the style clear: left or clear: both.

.column {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}

<ul class="column">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- ... -->
  <li>Item 49</li>
  <li>Item 50</li>
</ul>
<ul class="column">
  <li>Item 51</li>
  <li>Item 52</li>
  <!-- ... -->
  <li>Item 99</li>
  <li>Item 100</li>
</ul>
<div class="clear">

Solution 4

I've done this with jQuery - it's cross-platform and a minimum of code.

Select the UL, clone it, and insert it after the previous UL. Something like:

$("ul#listname").clone().attr("id","listname2").after()

This will insert a copy of your list after the previous one. If the original list is styled with a float:left, they should appear side by side.

Then you can delete the even items from the left-hand list and the odd items from the right hand list.

$("ul#listname li:even").remove();
$("ul#listname2 li:odd").remove();

Now you have a left to right two column list.

To do more columns you'll want to use .slice(begin,end) and/or the :nth-child selector. ie, for 21 LIs you could .slice(8,14) to create a new UL inserted after your original UL, then select the original UL and delete the li's selected with ul :gt(8).

Try the Bibeault/Katz book on jQuery it's a great resource.

Solution 5

Flexbox can be used to wrap items in both row and column directions.

The main idea is to set the flex-direction on the container to either row or column.

NB: Nowadays browser support is pretty good.

FIDDLE

(Sample markup taken from this old 'list apart' article)

ol {
  display: flex;
  flex-flow: column wrap; /* flex-direction: column */
  height: 100px; /* need to specify height :-( */
}
ol ~ ol {
  flex-flow: row wrap; /* flex-direction: row */
  max-height: auto; /* override max-height of the column direction */
}
li {
  width: 150px;
}
a {
  display: inline-block;
  padding-right: 35px;
}

<p>items in column direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>
<hr/>
<p>items in row direction</p>
<ol>
  <li><a href="#">Aloe</a>
  </li>
  <li><a href="#">Bergamot</a>
  </li>
  <li><a href="#">Calendula</a>
  </li>
  <li><a href="#">Damiana</a>
  </li>
  <li><a href="#">Elderflower</a>
  </li>
  <li><a href="#">Feverfew</a>
  </li>
  <li><a href="#">Ginger</a>
  </li>
  <li><a href="#">Hops</a>
  </li>
  <li><a href="#">Iris</a>
  </li>
  <li><a href="#">Juniper</a>
  </li>
  <li><a href="#">Kava kava</a>
  </li>
  <li><a href="#">Lavender</a>
  </li>
  <li><a href="#">Marjoram</a>
  </li>
  <li><a href="#">Nutmeg</a>
  </li>
  <li><a href="#">Oregano</a>
  </li>
  <li><a href="#">Pennyroyal</a>
  </li>
</ol>

View more solutions

Comments

[Benbob]

It's sad that two years later there is still no clean way to do this. Thanks IE.

[Stefano]

I'm also on this solution, but I'm losing the list bullets... even resetting them or trying an image does not work. Anybody?

[entonio]

+1 I find method 6 the cleanest approach - it can be adjusted to use no markup and very little CSS.

[Nesha Zoric]

97.8% browser support now. Check more about columns option in CSS here.