Question

I have been given a design with a number of variable height items stacked vertically in a fixed height container, with a variable width. So the idea is that the items can scroll off screen (will be in a wrapper) so that they can be scrolled horizontally onto screen.

I’m having trouble coming up with a solid way of organising the divs so that they stack reliably. Here is what I’m trying to achieve.

Answer 1

Try this – DEMO

HTML

<section>
    <div style="height: 100px;"> 1 </div>
    <div style="height: 50px;"> 2 </div>
    <div style="height: 150px;"> 3 </div>
    <div style="height: 300px;"> 4 </div>
    <div style="height: 50px;"> 5 </div>
    <div style="height: 100px;"> 6 </div>
    <div style="height: 100px;"> 7 </div>
    <div style="height: 70px;"> 8 </div>
</section>

CSS

section {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;

    height: 400px;
    background: beige;
}


div {
    width: 200px;
    margin: 0 10px 10px;
    background: orange;
    display: inline-table;
}