In a case where a column is higher then it’s siblings, I want the other columns to float beside. So in my demo case, column 3 and 4 should float beside column 2 on the left.
I also can’t assume that column 2 is going to be the tallest, it might be column 3, 4, or even 8. Does any CSS guru have the solution?
Float depending on element height? You may need to rely on JS
Even then, the problem there is WIDTH, and SOURCE ORDER. No matter what, a floated element cannot be higher than an element that precedes it in the source order. At most it can float ALL ELEMENTS beside each other, but for that all elements would need to fit withing the width of the container.