Div with different heights, align them side by side at the top

Question

I want to align divs side by side, but the heights are not equal, which results in a space between divs starting with the first line with a lower height and the div in the second line.

I want this:

not this:

Answer 1

I would use 3 divs (lets call them AB and C) as columns

They will have style = "float: left; width: 32%;" * CAN note width can be less than 32% and can be set to px

A will contain 1 and 4, while B will contain 2 and 5. Finally, C will contain 3 and 6.

There is absolutely no need for plugins, and it can (and currently by me) be done only with CSS.

Answer 2

You cannot do this with CSS alone, unless you are absolutely ready to position each div, which is not very fun.

Other options include

• grouping each column in a separate div
• using javascript like script like freemasonry

Answer 3

use margin-top: -20px; for div 4 and div 6 ...

-20 is an example of course