Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Multi-column CSS lists

Tags:

css

list

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?

like image 812
Andrew Hedges Avatar asked Jun 01 '09 05:06

Andrew Hedges


People also ask

How do I display a list of items in two columns?

This is the simplest way to do it. CSS only. add width to the ul element. add display:inline-block and width of the new column (should be less than half of the ul width).

How do I display the list of items in a column?

Create a list with as many list elements as you want. Then enclose the list in a div, setting style=column-width and style=column-gap, to match the information in your list elements. Do not set style=columns. Totally responsive list that adapts to screen size.


1 Answers

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; 
}
like image 150
ilya n. Avatar answered Oct 04 '22 20:10

ilya n.