Here's the situation: you have 3 <div>s
- width 300, height 200
- width 300, height 300
- width 200, height 100
I want to put first two next to each other, but the third one right below the first one.
As you can see on the picture, this is what usually happens with html <div>s.
They act like first two are put into a another <div> with width:100%, or a horizontal line is made after the second one.
I'm looking for a solution for more than 3 <div>s, and with more than just 2 columns.
Like a 'fit them as close as possible to the top left corner', something like if CSS had float: top-left.
I want them to first align horizontally, and then vertically.
The only other constant that I have in my case would be that my <div>s (read <tables>s) have width: 300px, which might or might not help in this situation.
Of course, the question is then 'How do you want to align them if one of them has very large height?' , and I'd answer to that 'I don't care, I'm just trying to align some content that user will read, it's more for show than functional'.
EDIT
Oh, it's called masonry layout. I didn't know that. Ok, then this question is a duplicate. Please comment if I should delete it. I described it the best I can, so maybe someone else trying to find this kind of layout by explaining it can stumble upon this question and see the link in the duplicate header.
