Clear left if it's wider then container in CSS
I have a fiddle to demonstrate the problem I'm trying to solve:
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.