float:left fill same column where possible - html

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:
<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">8</div>
</div>
​And this is my CSS:
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
position:absolute;
}
.i1,.i2,.i3 {
float:left;
width:100px;
background:lime;
border-radius: 20px;
text-align:center;
}
.i1 {
height:33px;
}
.i2 {
height:66px;
}
.i3 {
height:100px;
}
Fiddle of my code

Answer 1

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;
}

Answer 2

You will have to separate the columns into extra divs. Float left aligns elements horizontally, so they will behave like words in a sentence. Wrapping each section of divs and floating the wrapper left creates the effect you desire, but only in this specific case. If this is to be more dynamic, you might have to re-think your design.
HTML:
<div class="container">
<div class="wrap">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
</div>
<div class="wrap">
<div class="i2">5</div>
<div class="i3">6</div>
</div>
<div class="wrap">
<div class="i1">7</div>
<div class="i1">8</div>
</div>
</div>​
CSS:
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
position:absolute;
}
.wrap
{
float: left;
width: 102px;
}
.i1,.i2,.i3 {
width:100px;
background: #000;
border-radius: 20px;
text-align:center;
color: #fff;
}
.i1 {
height:33px;
}
.i2 {
height:66px;
}
.i3 {
height:100px;
}​
http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/ (I changed the colors because they hurt my eyes.)
After some clarifications on the question, if this is to be dynamically populated with shifting heights then there is no solution that doesn't use some crazy Javascript. You'll have to come up with another design.

Answer 3

You can probably make it work with flexbox. I'm not sure about the support in iOS browsers but newer webkit browsers do support it so it might be worth a look.
.container {
overflow:scroll;
width:10000px;
height:200px;
background:skyblue;
display: -webkit-flex;
-webkit-flex-flow: column wrap;
}