CODEWITHSUNDEEP
csshtmlcss-float
Mathijs Delva
Mathijs Delva

Reputation: 23

Float divs with variable heights (arrange)

I'm having a simple problem concerning the arrangement of floating divs with variables heights.

The goal:

goal

The result:

result

I just have div containers with css float: left; and no height defined. The first red circle indicated that my technique fails, although the second one proves me wrong by showing it IS working. Unfortunately, the last (not on screenshots) just starts floating after the height of the previous one (so there's a whole empty space on the left).

How should i solve this?

Upvotes: 2

Views: 2090

Answers (2)

Hannes
Hannes

Reputation: 8237

I don't think that this is doable a 100% with "just" css, but jquery-masonry should do the trick https://desandro.com/#masonry. Well, but i hope somebody proofs me wrong :)

Upvotes: 1

Šime Vidas
Šime Vidas

Reputation: 185873

You have two columns. Then code it accordingly:

<div class="column">
    contents of first column
</div>
<div class="column">
    contents of second column
</div>

(you set float:left on the column DIVs)

Upvotes: 0

Related Questions