I am able to do the list using float:left; like this
But I would like to show it like this (as 2 or more columns)
How can I do that?
@sandeep gave good solution. Unfortunately does not work in IE(need ie7 and above).
any help?
Source: Tips4all
For this, you can use the column-count property:
ReplyDeletediv#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
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