Forcing div stack from left to right

Question

Is there a way to force div elements to stack under each other no matter the height?

Currently this happens: http://jsfiddle.net/w974mna9/

div{
    width:24%;
    margin-right: 1%;
    float: left;
    margin-top:5px;
}

.one{
    background-color:red;
    height: 50px;
}

.two{
    background-color:green;
    height:35px;
}

.three{
    background-color:orange;
    height:45px;
}

.four{
    background-color:magenta;
    height:25px;
}

.five{
    background-color:black;
    height:55px;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>

<div class="one"></div>
<div class="three"></div>
<div class="four"></div>
<div class="two"></div>
<div class="five"></div>

The first div that get forced into the next row stacks on the div with the lowest height and the others are pushed down one more row. I want to stack them from left to right in the order they are placed with the variable height indent on their upper siblings.

EDIT:
I don't want them to stack vertically, I want them to stack under each other in a row.

The OP has updated the question. The other answers do not provide a solution to this question. — BCDeWitt, Aug 19 '15 at 18:25
@BDawg, I'ts ok, Lal or Paulie_D provided a link to the the answer. Pointed me [here](http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights). Thanks, masonry works like I need it to. — Aleksandar B., Aug 19 '15 at 18:30
@Aleksandar_B. Okay, glad you found your answer. Just a side note: If you would like a simple, row-based solution without a Masonry layout, you could also use `inline-block` like so: https://jsfiddle.net/wLo8usv8/ — BCDeWitt, Aug 19 '15 at 18:40
I added an answer here: [**CSS Floating Divs At Variable Heights**](http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights/32109114#32109114) explaining why you can not achieve this using float. — Yandy_Viera, Aug 20 '15 at 19:13

score 1 · Answer 1 · answered Aug 19 '15 at 18:11

1

Add "clear" property for floating elements, for example

{
 float: left;
 clear: left;
}

answered Aug 19 '15 at 18:11

Dmitry Lobov

313
1
10

score 1 · Answer 2 · answered Aug 19 '15 at 18:11

1

If you add clear: both to the div style, they will appear under each other.

jsfiddle

answered Aug 19 '15 at 18:11

Leroy

237
2
12

score -2 · Answer 3 · answered Aug 19 '15 at 18:10

-2

try

div{
    width:24%;
    margin-right: 1%;
    margin-top:5px;
}

answered Aug 19 '15 at 18:10

laphbyte

32
3

Forcing div stack from left to right

3 Answers3

Linked