All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Mutli Column List

  • TWG
    # January 7, 2013 at 11:54 am

    Is there a way to make a list automatically split up into multiple columns? I have a list that is being fed in by an RSS and I would like it to span multiple columns based on the number of entries.

    # January 7, 2013 at 12:05 pm

    This reply has been reported for inappropriate content.

    @Maddtechwf, you may try CSS3 multiple columns, but I’ve never used it, and don’t know if it works for lists.. http://css-tricks.com/snippets/css/multiple-columns/

    # January 7, 2013 at 12:31 pm

    You can in CSS, if you don’t mind that it goes like:

    1 2
    3 4
    5 6

    li {display:inline-block; width:50%;}

    Floats etc can be used too. If that’s no good, google on ‘jquery list columns’ will return several plugins, such as Easy List Splitter: http://www.madeincima.it/en/articles/resources-and-tools/easy-list-splitter-plugin/

    However, I am unable to find any that will align all items bottom when it’s an odd number, not even any of the Masonry special layouts.

    TWG
    # January 7, 2013 at 4:10 pm

    This reply has been reported for inappropriate content.

    I tried what you said to do above with CSS but this is what I ended up with.
    http://jsfiddle.net/maddtechwf/5gYv9/

    # January 7, 2013 at 4:20 pm

    This reply has been reported for inappropriate content.

    @maddtechwf, add float: left; to the li’s too

    TWG
    # January 7, 2013 at 5:20 pm

    This reply has been reported for inappropriate content.

    Thank you @ChrisP

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed