Wrapping lists into columns

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.