Uneven grid layout

Question

Here is the example.

http://jsfiddle.net/wnud4/1/

I'm wanting all of the green boxes and blue boxes to fall into order one after the other with no large gaps, aside from the established margins. For some reason, the second element in the blue column is complaining about alignment. Does anyone have any suggestions, or could provide guidance if I am approaching this the wrong way. I don't want to predefine columns, but other than that I'm open to anything. Thanks!

Answer 1

Rather than using floats on both columns, you could only use float: left on the left column, and simply use margin-left on the right column, to push those divs past the floated divs. Then you'd just need to clean up your widths and margins to keep everything even.

Here's an example: http://jsfiddle.net/UZY6t/2/