Question

I have a div and I have a list inside the div. I want the list inside the div to appear like this:

Item 1    Item 5    Item 9

Item 2    Item 6    Item 10

Item 3    Item 7    Item 11

Item 4    Item 8    Item 12

I understand that with display:inline-block I can make it like this,

Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8

But I would like for the columns to go vertically and then start again from the top in the next column (as shown above) once the div ends. The div has a fixed height. Without any display, the text just goes outside the div.

Thanks!

Answer 1

@urgenthhelp; you can use css3 columns count property .

css

ul {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
li{margin-bottom:10px}

check this http://jsfiddle.net/sandeep/Qnsqm/ may be that’s help you.