csshtml-lists

Is there a way to break a list into columns?


My webpage has a 'skinny' list: for example, a list of 100 items of one word in length each. To reduce scrolling, I want to present this list in two or even four columns on the page. How should I do this with CSS?

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

I prefer the solution to be flexible so that if the list grows to 200 items, I don't have to do a lot of manual adjustments to accommodate the new list.


Solution

  • The CSS solution is: http://www.w3.org/TR/css3-multicol/

    The browser support is exactly what you'd expect..

    It works "everywhere" except Internet Explorer 9 or older: http://caniuse.com/multicolumn

    ul {
        -moz-column-count: 4;
        -moz-column-gap: 20px;
        -webkit-column-count: 4;
        -webkit-column-gap: 20px;
        column-count: 4;
        column-gap: 20px;
    }
    

    See: http://jsfiddle.net/pdExf/

    If IE support is required, you'll have to use JavaScript, for example:

    http://welcome.totheinter.net/columnizer-jquery-plugin/

    Another solution is to fallback to normal float: left for only IE. The order will be wrong, but at least it will look similar:

    See: http://jsfiddle.net/NJ4Hw/

    <!--[if lt IE 10]>
    <style>
    li {
        width: 25%;
        float: left
    }
    </style>
    <![endif]-->
    

    You could apply that fallback with Modernizr if you're already using it.