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

Sunday, April 8, 2012

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?

Tips For AllApril 8, 2012 at 8:40 PM
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
Replies
Tips For AllApril 8, 2012 at 8:40 PM
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
Replies