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

2 comments:

  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

    ReplyDelete
  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.

    ReplyDelete