Clearing rows of floating blocks with different heights

Question

I'm using a slightly modified Soh Tanaka's Smart Columns, but in his example all blocks/columns have the same height. If I have divs with different heights, the technique breaks like in the following jsfiddle. I don't like how DeSandro's Masonry handles the height problem because it rescrambles the blocks depending on window size so the list loses its implied sequential ordering, so I'm exploring a different solution.

The solution I'm currently trying is this, but I have problem trying to clear the sides of the rows/lines. I can use javascript to insert a <span style="clear: both;"></span> to the ends of every rows/lines, but this causes more problems when the window is resized and if there is multiple groups of such smart columns in a single page. While I'm sure I can write a script to deal with those cases, I think there might be an easier way.

What is the easiest way to make it such that when a list of floating blocks needs to wrap, it should start at the bottom of the tallest box on the previous row/line? A CSS-only solution is preferred, but a javascript/jQuery-based solution would be acceptable.

Rephrased in another way, I want to float blocks like how letters of different sizes are "floated" (letters are vertically aligned at their baseline by default, though for div blocks a top alignment would probably looks better):

Answer 1

You could switch from float: left to display: inline-block; vertical-align: top.

http://jsfiddle.net/thirtydot/LCDDD/1/

I also added a tiny bit of JavaScript:

$(this.config.column_selector).contents().filter(function() { return this.nodeType === 3; }).remove();

inline-block is unfortunately affected by whitespace in the HTML, so that snippet removes text nodes between the li elements. Alternatively, there are CSS fixes available (with downsides), or you could just remove the whitespace in your HTML.