Sunday, April 8, 2012

I want to show list items as 2 or more columns (dynamic alignment)

I am able to do the list using float:left; like this

enter image description here

But I would like to show it like this (as 2 or more columns)

enter image description here

How can I do that?

@sandeep gave good solution. Unfortunately does not work in IE(need ie7 and above).

any help?

Source: Tips4all


  1. For this, you can use the column-count property:

    div#multicolumn1 {
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 3;
    column-gap: 50%;

    Check this jsFiddle.

    Note: It does not work in IE.

    For IE, you can use this JavaScript: CSS3 - Multi Column Layout Demonstration

  2. Modify your CSS so that the container is only wide enough for two of the pink blocks. Add vertical-align:top; to the style for each item so that the blocks line up.