Forced stack div from left to right

Question

Is there a way to get div elements to stack under each other regardless of height?

This is currently happening: 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, which gets into the next line, flows onto the div with the lowest height, and the rest are pushed another line. I want to stack them from left to right in the order in which they are indented with variable heights on their older brothers and sisters.

---

EDIT:
I do not want them to fold vertically, I want them to fold under each other in a row.

Answer 1

Add a "clear" property for floating elements, for example

 { float: left; clear: left; } 

Answer 2

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

jsfiddle

Answer 3

to try

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