List divide into multiple columns [duplicate]

Question

I want to divide the list into multiple column and each column should have maximum number of 5 data list same as shown in below image. Please guide how can I achieve this?

Answer 1

http://jsfiddle.net/U28rS/

CSS code:-

#cols {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

HTML:-

<div id="cols">
    <ul>
       lists 
    </ul>
</div>

Answer 2

CSS3 columns should be the optimal choice (update: also flexbox), but unfortunately has not a wide support yet. You can achieve the same result with simple 2d-transforms (available also on IE9)

See http://jsfiddle.net/79rtx/1/

Basically all list-items are floated, the unordered list is rotated by -90deg. and list-items rotated by 90deg.

---

Relevant css

div { 
    border   : 1px green solid; 
    /* use easyclearing on div (or this workaround) */
    overflow : auto; 
    height   : auto;
}

/* clear */
ul + * { clear: both; }

ul {
   float : left;
   height : 160px; /* (30 + 2px) * 5 */ 

   -webkit-transform : rotate(-90deg);
   -moz-transform : rotate(-90deg);
   -ms-transform : rotate(-90deg);
   -o-transform : rotate(-90deg);
   transform : rotate(-90deg);
}

li:nth-child(5n+1) { clear: right; }

li {
   width      : 30px;
   height     : 30px;  
   float      : right;
   margin     : 1px;
   background : #ccc;

   -webkit-transform-origin : 50% 50%;
   -moz-transform-origin : 50% 50%;
   -ms-transform-origin : 50% 50%;
   -o-transform-origin : 50% 50%;
   transform-origin : 50% 50%;

   -webkit-transform : rotate(90deg);
   -moz-transform : rotate(90deg);
   -ms-transform : rotate(90deg);
   -o-transform : rotate(90deg);
   transform : rotate(90deg);
}