How to create vertical list of items in CSS?

Question

Suppose you have a list of items, and put them in divs. The list is generated dynamically and the number of items is not known.

CSS:
div#container {
    width:500px;
}
div.item {
  width:150px;
  float:left;
}

HTML:
<div id="container">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    .
    .
    .
</div>

The browser output looks like:

item 1 item 2 item 3
item 4 item 5 item 6
. . . . . .

How to create vertical columns like:

item 1 item 4
item 2 item 5
item 3 item 6
. . .

Answer 1

@B Seven; you can use css3 column-count property for this.

For example :

#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 link for a demo Div's in two columns

http://jsfiddle.net/sandeep/pMbtk/

note: it doesn't work in IE.

Answer 2

For this type of alignment, you'll need to know the number of items in advance of placing them, so that you'll know how many to put in the first column.

I'd use either two divs, float left and right, and line breaks to put on item below another, switching to inserting into the second div (eg $('#seconddiv').append('Item 4');

or I'd use a table. If you need handling of some kind on each item, put them in their own divs or span, or cells. Then you can style them and click them separately.

Answer 3

one more time +1 to sandeep love his solution using css3

You can check also this link : Check this

Answer 4

CSS:

.tableDiv,
        .rowDiv
        {
            width:400px;
            float:left;
        }       
        .clDiv200
        {
            width:200px;
            float:left;
        }

HTML:

 <div class="tableDiv">
        <div class="rowDiv">
            <div class="clDiv200">Item 1</div>
            <div class="clDiv200">Item 4</div>          
        </div>
        <div class="rowDiv">
            <div class="clDiv200">Item 2</div>
            <div class="clDiv200">Item 5</div>          
        </div>
        <div class="rowDiv">
            <div class="clDiv200">Item 3</div>
            <div class="clDiv200">Item 6</div>          
        </div>
    </div>

This will work in all browser ok..