Question

I am working with a joomla plugin that generates some html for a form. The problem I have is with the css.

The script generates several divs of varying height, all of which are stacked into a two column layout. The problem is that since they are all floated left, sometimes a second column tall div can block the next div from floating under the adjacent short first column div. Without further hand waving, here is a jsfiddle

What reasonably browser compatible css can I use to stack the floats correctly? Note that the second column divs have essentially no classes or ids to distinguish them from the first column divs.

Here are things I would preferably avoid:

1. Non compatible solutions like nth-child()
2. Changing the script to generate css hooks with the html

Javascript is sort of okay

EDIT: It seems the javascript comment is not prominent enough. As the jsfiddle stands, everything is working correctly. This is what I want the layout to look like. Unfortunately, I cannot use a correctfloat classname on the div, because I am not the one generating it. Remove the correctfloat classname to see what the problem is.

Answer 1

http://masonry.desandro.com/

Is this what you’re looking for?