Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css multiple columns list with list-items of varying heights

css multiple columns list with list-items of varying heights

Problem

I have a list of elements each contained in a box that I want to split into two Columns. Something like this:

HTML

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quos, unde, tenetur labore consequuntur repudiandae tempore totam soluta praesentium non cumque assumenda incidunt itaque pariatur animi eaque nam aliquid repellendus! Sed, eius laudantium deserunt pariatur rerum possimus enim iste corporis doloribus dolor ea ducimus facere similique qui nostrum excepturi quis ut aliquam animi nam eos doloremque et rem repellat libero neque at quas nesciunt explicabo fugiat.
  • Modi, eos, veritatis, laboriosam, cumque neque similique ea harum quas
  • totam cupiditate maiores impedit molestias non maxime nam quis animi laborum nesciunt ut provident sed dolorem dolorum veniam asperiores eligendi ad ratione sunt perferendis facilis
  • in earum itaque odio fugit mollitia exercitationem tempora necessitatibus voluptates accusamus dolore architecto eum natus. At, nulla, natus magnam quia provident consectetur nobis commodi quis repellendus dicta. Quo, placeat, excepturi iusto ipsam ullam cumque amet molestiae quaerat pariatur laboriosam voluptate
  • nostrum explicabo esse iure debitis mollitia minima doloribus architecto velit dolorum autem voluptatem aperiam quidem odit dolore itaque quasi.
  • Illum, doloribus, assumenda odit incidunt accusamus perferendis libero quas temporibus sit rerum tempora ipsum inventore aliquid accusantium sequi eveniet mollitia dolorem
  • quibusdam omnis architecto officiis ullam earum error. Quia, velit, odio, pariatur, officia maiores accusantium quibusdam aliquam nisi asperiores ipsam odit saepe molestiae cumque adipisci vel quis sapiente cum consectetur repellat deserunt. Dolore, neque harum recusandae praesentium quos officiis
  • dolores! Aliquid, aut nesciunt officiis. Beatae, maiores,

CSS

ul {
list-style-type: none;
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;
}

li{
padding: 30px;
background: chartreuse;
margin-bottom: 20px;
}

My problem is that the columns are cut based on the text rather than the

  • 's as you can see here : http://jsfiddle.net/hZSCm/

    Is there a way to get my columns to behave properly using css or could I only do this is javascript? If so would I have to use something like columnizer or is there a simpler approach.

    Problem courtesy of: mantis
  • Solution

    Try this:

    li{
        padding: 10px;
        background: grey;
        margin-bottom: 20px;
        display: inline-block; /* Add inline-block */ 
    }
    

    SEE DEMO

    Solution courtesy of: aldanux

    Discussion

    View additional discussion.



    This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

    Share the post

    css multiple columns list with list-items of varying heights

    ×

    Subscribe to Css3 Recipes - The Solution To All Your Style Problems

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×