many divs in a 3-column newspaper layout

Currently I have a number of divs of undefined length/height. they contain a few hyperlinks as a list. The almost-desired effect is achieved by giving these divs float:left; width:150px; margin: 10px; However, in the scenario of the first div containing just 1开发者_运维知识库 link, and the second div containing 10 I get the following result (numbers represent divs):

1  2  5
   3  6
   4  7
8

The desired result is, ofcourse, as follows

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

There are three solutions, each with their problems.

First, you can set a height limit on all of the item, or use a fixed height. This, combined with the overflow property, will give you a neat grid of items.

ul li {
    width: 200px;
    height: 200px;
    float: left;
    overflow: hidden;
}

Alternatively, you can pull the divs into three different containers, each individually floated. This will also give you your three columns, but you'll probably need to do something server side to make sure that the height of the elements in each column are evenly distributed:

ul {
    float: left;
    width: 200px;
}

Finally, there's the CSS3 Column Module, which allows you to create columns neatly and easily, but has no support on IE at all.

ul {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
}