Making tiles that will stack to the right

Question

I really hope I'm not repeating some well known problem, but i tried to search for it and didn't find anything quite like this. Closest was the masonry layout with jQuery, but that does not meet the criteria i need. Sorry if anything is unclear, i'm not native English speaker.

I need to create a view in which a number of boxes (divs) are placed in the same parent div. Each of those tiles has same width but different height. Each of the tiles needs to be placed at per-box specified vertical distance from parent top edge and as close to left edge of the parent as possible to prevent overlapping between tiles.

What I'm trying to get is this:

I tried two solutions:

1) giving them float: left; with margin-top: XYZpx;, but that unfortunately does not work when one of the tiles has margin-top large enough to be below all other boxes. I would like it to float to the left edge of the parent, but the margin "collides" with other tiles and gets placed to the right of all previous tiles (tile 5):

JSFiddle (you may need to expand result window to see actual result - everything in one row)

2) giving the tiles position: absolute; and top: XYZpx; but that leaves me with them overlapping in one column, with no apparent way to prevent it:

JSFiddle

Is there a way to either make floated tiles "collapse" to the left, or for absolute positioned divs to not overlap? (aside from analyzing the tiles and computing the correct left: value, which i don't have a clue how to do. Result is what i need, but i don't know how to properly determine left values when generating the page: JSFiddle)

Edit: To clarify, those tiles are generated from php, there is unknown number of them, with unknown heights. The PHP code inserts top and height values as inline style, values calculated from database data. I'm looking for a way to style those tiles to go as far left as possible without overlapping with any of the tiles "above" them (in code, they are sorted by start height - from top: 0px; to top: MAXpx;). Also, there are no rows - tiles may have any value for their distance from the top of the parent. Think of this as a sort of timetable where many entries can be happening at the same time.

Edit2: As requested, html, css provided.

Edit3: In an ideal world, this is what i would like to happen (note the tile 4 "realizing" it will fit under 2. JSFiddle)

Answer 1

You have to use clear:both at the end of 4th box in your first solution

HTML

<div class="1">1</div>
<div class="2">2</div>
<div class="3">3</div>
<div class="4">4</div>
<div class="clear"></div>
<div class="5">5</div>
<div class="6">6</div>

CSS

.clear{clear:both; width:0; height:0; display:inline-block;}

Answer 2

Have you looked at using Bootstrap to help with this. May be a little "Push or Pull". Take a look at this Fiddle to see if it helps you.

<div class="container col-xs-12 block">
    <div class="col-xs-1 bg-success Block1">1</div>
    <div class="col-xs-1 col-xs-offset-1 bg-primary Block2">2</div>
    <div class="col-xs-1 bg-success Block3">3</div>
    <div class="col-xs-1 col-xs-pull-4 bg-primary Block4">4</div>
    <div class="col-xs-1 col-xs-pull-4 bg-success Block5">5</div>
    <div class="col-xs-1 col-xs-pull-4 bg-primary Block6">6</div>
</div>