Prevent float divs to start a new row. HTML & CSS

Question

I am trying to make a simple tile grid. Here is my HTML:

<div class="tiles">
<div class="tile25x50">1</div>
<div class="tile50x50">2</div>
<div class="tile25x50">3</div>
</div>

And CSS:

.tiles {
width :100px;
}

.tile25x50 {
width: 50px;
height: 25px;
background-color: red;
float: left;
}

.tile50x50 {
width: 50px;
height: 50px;
background-color: blue;
float: left;
}

And the result is:

My question is how can I prevent the third div to be inserted in new row and instead fill the gap?

Live demo in jsfiddle.

Answer 1

Split layout in columns if you don't need to expand items in columns, if not use something like masonry. In simple CSS you would probably ended with dozens with wrappers and javascript either way or with one item solutions.