Floating elements horizontally from top to bottom and left to right

Question

I want to create a div which has horizontall scrollbar. The elements inside it should display from top to bottom and left to right.

1 3 6
2 4 7
  5 8

The height of each element is variable (and might not be the same in each element) so depending on the screensize elements position might change, for example:

1 3 5 7
2 4 6

or in extreme:

1 2 3 4 5 6 7

If I float:left the inside elements, the display is like follows:

1 2 3
4 5 6

http://jsfiddle.net/nx88G/

Is there a way to achieve this using only CSS?

I know I can achieve this with a javscript plugin such as isotope (click masonryHorizontal)

Answer 1

Only close to the question, i can think of a mix of column CSS and eventually writing-mode.

test: http://codepen.io/gc-nomade/pen/mGJfK/

markup used many times in body : <b> inline-box </b>

columns :

body {
  column-width:9em;
}
b {
  display:inline-block;
  width:8em;
}

and experimental writing-mode added :

body {
  writing-mode:rl-tb;/* IEs */
  -webkit-writing-mode: horizontal-bt;
  -moz-writing-mode: horizontal-bt;/* FF fails here */
  -o-writing-mode: horizontal-bt;
  writing-mode: horizontal-bt;
}

Answer 2

try using the display:flex property on your container

#container {
    height:100%;
    width:500px;
    background:black;

  /* added CSS */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}