float:left fill same column where possible

Question

I'm trying to place some divs, with this rule: Fill first column where possible, then (when first column is full) fill the second column, etc. (Please see the image below) This is what I want to have: (created with Paint!) In the image above, as you can see, first column has 1,2,3,4 and there is not enough vertical space to put 5 in the first column. So 5 should be placed on the second column... I've tried to create something like the image above using `float:left`, but this is the result: How to create something like the first image? What's wrong with my current code (which creates the second image)? This is my HTML code: ```

1

2

3

4

5

6

7

8

``` And this is my CSS: ``` .container { overflow:scroll; width:10000px; height:200px; background:skyblue; position:absolute; } .i1,.i2,.i3…

Accepted Answer

just modern tablets and smartphones should show it correctly

In that case, use CSS3 columns. The browser support should be good enough.

http://jsfiddle.net/thirtydot/AQ7bp/4/

```
.container {
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;

-webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
}
.i1,.i2,.i3 {
    display: inline-block;
    vertical-align: top;
}
```

float:left fill same column where possible

Solution

Problem