0

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
TylerH
  • 20,799
  • 66
  • 75
  • 101
sentiao
  • 165
  • 9

1 Answers1

2

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;
}
Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
  • Thx, I 've picked the rewriting of html output solution. In php I used a division without decimal to decide which column each block would be in. I was really hoping for an easier method, one that takes a little more distance from wring layout in the content output. HTML in it's current form has it's limits I guess =] – sentiao Nov 09 '10 at 08:11
  • @sentiao The CSS3 Columns Module is suppose to fix this, but the lack of IE support is really killing it – Yi Jiang Nov 09 '10 at 08:20