CSS: float:left align up

Question

I used float:left and now my text looks like

.   A   .   B   .   C  .
.     a .     b .      . 
.       .     b .   D  .
.       .     b .     d.
.       .       .     d.
.       .       .     d.
.   E   .    F  .      .
.       .     f .      .

But I want

.   A   .   B   .   C  .
.     a .     b .      . 
.       .     b .   D  .
.   E   .     b .     d.
.   F   .       .     d.
.      f.       .     d.
.      f.       .      .
.      f.       .      .

I have tried "display: inline-block" but it looks like

.   A   .   B   .   C  .
.     a .     b .      . 
.       .     b .      .
.       .     b .      .
.   E   .   D   .   F  .
.       .     d .     f.
.       .     d .     f.
.       .     d .     f.
.       .       .      .

Can anyone help?

Answer 1

CSS does not currently allow you to do that, unfortunately. However, there are some JavaScript libraries that can do layouts like this. One popular choice is Masonry.