7

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?

Improve this question
5
  • 1
    The second I read the title to this question I looked up that link for the A List Apart article. Multi column lists are just one of those areas where browsers are not very refined. I don't think you're going to find a pure HTML/CSS solution to do this, but I'm interested to see if anyone comes up with something clever... Commented Jun 1, 2009 at 5:22
  • I think I got the answer to your clarified question... does this work for you? Commented Jun 1, 2009 at 22:41
  • So, how's that going? Is there an answer? Commented Jun 16, 2009 at 1:51
  • Anything else I could do to make my answer better? Commented Jun 21, 2009 at 1:27
  • Sorry, I just haven't had a chance to get back to that project and try to implement this. Once I do so, I'll let you know if it worked in my case. Thanks for your thoughtful answer! Commented Jun 21, 2009 at 21:46

5 Answers 5

Reset to default
8

Original post

In fact the single command does the trick for me (although it comes in -webkit- and -moz- versions): 

div.wrapper 
{
    -webkit-column-width: 10em;
    -moz-column-width: 10em;
}

Here are additional rules to improve readability. Insert the code below and above into an example from A List Apart article (I can paste the whole HTML if somebody clears copyright) and enjoy:

div.wrapper {       
    border: 2px solid blue;
    -webkit-column-rule: 2px solid blue;
    -moz-column-rule: 2px solid blue;
}

.wrapper ol {
    margin: 0;
}

.wrapper br {
    display: none; /* Extra BR is unnecessary there */
}

Tested: Safari 4 (4528.17), Fx 3.5b4 /Mac.

Note that on the first encounter of column-width properties some time ago I completely missed the crucial fact that it does rebalancing. Discovered it now at W3C and confirmed with Surfin' Safari.

Addendum: Fixed number of columns

As I understand from the clarification, the width of columns should change with the widthof the page, so the commands are more like 

div.wrapper 
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
}

Addendum: Vertical scrolling

Now you say that there should be a vertical scrollbar. Since there is no UI that would do separate scrollbars to the right of each column, I think you have in mind one scrollbar that would scroll the whole multicolumn list. That can be done by wrapping one more div with 

div.morewrap 
{
     height: 50%; /* whatever you need */
     overflow-y: scroll; 
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I did experiment with setting column widths. It should be all I need, but I'm finding with overflow: auto (which I have set because the container is an absolutely positioned div) it just adds columns rather than vertically scrolling. Not what I expected!
I'm not sure what you need. Do you say the whole thing should have both fixed height and width and vertical scrolling if necessary?
In my design, the height and width change with the browser window and I want only vertical scrolling. Safari and Firefox both render with horizontal scrolling (adding columns) the way I have things set up.
I wasn't clear in my previous comment. The viewport size can change, but the column width should remain constant (always 240px in my case). The number of columns should change depending on the viewport width, with only vertical scrolling, if necessary. Does that make sense?
It appear to me that what you need is th combination of "original post" and "Vertical scrolling" sections. Does it work? Note there should only be overflow-y to get the required behavior.
1

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/

Improve this answer

Comments

0

Not through plain CSS, no. There might be a JavaScript implementation somewhere, but I don't know of any fluid ones as you describe.

Improve this answer

4 Comments

If browser support is there for the CSS3 module, I could use JS to change the number of columns at pre-determined widths. I'd prefer to avoid that route, though. Not even sure if the browser support is there.
Firefox and WebKit (Safari and Chrome) support it. The problem is, how would you do that? I guess you could edit the .style property of the element, but that's just messy.
Hmm, I'll think about it and get back to you. Would be an interesting script to write. :)
Sorry, had to vote down since I found the clear CSS3 command supported by Safari and Firefox.
0

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.

Improve this answer

Comments

0

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.
Improve this answer

2 Comments

Can you add your solution's details here, for posterity?
A demo page can be found here: weedygarden.net/demos/css3-column-lists

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.