As you can see in the first row the third column is aligning to the right (because the column on the farthest left is taller then the column immediately to the right of it).

I know if I do a clear: both; after the 2nd column to get the final column to float all the way to the left, but since I'm trying to do more responsive design it would be best if I could do it without clears (since if the container became big enough I would want the column to come up flush with the rest of the columns instead of clearing).

Does anyone know how to solve this problem? I hope it made sense.

kohoutek
—
2012-10-14T03:59:40Z —
#2

I'd not add any floats at all when you have the total layout being a mere 500 pixels wide. Instead, I'd look for breaking points in your design, e.g. if a viewport is wider than n pixels, then add a float and work your way up to the biggest viewport you want to support.