Question

I have a set of divs which are generated dynamically. I have set there width but the height is different each time. I have given the divs float:left The problem is that they don’t position right under each other. The form rows and the div with the biggest height is the height of the row. This is leaving a lot of space between divs (vertically)

Please take a look at the example: JsFiddle

How do I get the div that says “move this div up” stick under the div1?

Answer 1

If the heights of your divs are static (unlikely, I know), you can add a negative margin-top to the div you want to move up. See this fiddle.

For dynamically created divs, your best bet will probably be a third party plugin (as I mentioned in my comment above) like jquery masonry, or something similar.