different height divs float in two columns

Question

I have two columns and want to stack divs of different heights in order of appearance.

The divs are dynamically created.

If i only float them on 50% of width

Answer 1

Use 2 div as container, put both column in this container div,so give this div float left and right....it may work... Also grid layout will work.

Answer 2

You're going to have to do this with JavaScript. If you're using jQuery, there is an excellent plugin called Masonry. There is also the non jQuery version.

To quote the README on GitHub:

Masonry is a dynamic grid layout script. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

The single column layout is probably what you're looking for.

---

If you don't mind leaving older browsers in the dust, there are the CSS3 column properties. There's an example here, on Quirksmode, and some documentation on the MDN.