Multi-column CSS lists

Tags: list css3 css
Question!

Is there a way to do re-flowable, multi-column lists, where the list can have list items of varying heights, using only valid CSS? By re-flowable, I mean that as the user drags the window wider or narrower, the number of columns should automatically adjust when the list items are of fixed width.

I've seen the article on A List Apart, but none of their solutions fit all of those (seemingly simple) requirements. At first glance, I think the CCS3 proposal for multi-column lists does not either (because it appears you have to specify the number of columns).

If it helps, I am not at all concerned about IE6 and only kind of concerned about IE7. My target audience is early-adopter, web-savvy types.

Update: Looking more closely at the CSS3 spec, specifying a column width should do it, but in reality, I'm running into weirdness with overflows and such. Anyone using this stuff IRL?



Answers

I recently had the need to use multi-column lists in a project. We're using CSS3 columns and ran into several little gotchas along the way. I posted a write-up about it here: http://bit.ly/css3lists

The short of it is this:

  1. Only set the number of columns and the width between, not the column widths.
  2. If you don't want content to break over multiple columns, you'll need to add some extra markup to make the lists render correctly.


Using CSS multi-column layouts, it's possible to specify either the number of columns (which will get wider or narrower as you resize) OR the width of the column (which will cause new columns to be added or removed as you resize):

ul li {
    margin-left: 1em; /* needed to preserve bullets */
    column-break-inside: avoid; /* don't forget this */
}
ul {
    list-style: outside disc;
    padding-left: 0.5em;
    column-width: 150px; /* actually the minimum width */
}

http://jsfiddle.net/mblase75/XtzLF/



I realize this is an old post, but I just got this working on my project, and Ilya's solution did not work for me (though maybe I missed something). Anyway, the problem is that with CSS3 columns (now a Candidate Recommendation) the overflow wants to go off to the right by creating additional columns, and if you have overflow:auto you end up with a horizontal scrollbar, instead of a vertical one (which the OP wanted, and I also wanted). I fixed this by wrapping the div that held the columns (with -moz-column-count set) inside another div, and setting the height on that one with overflow-y:auto. The meant that the outer div could scroll vertically, while the inner div with the columns had as much height as it needed and did not need to overflow horizontally.

I hope the helps.



This video can help you solving your question :)
By: admin