"Better" floating in CSS

Question

I'm experimenting with CSS and the float property. I have this "website", with a lot of divs aligned to 80px grid and float: left:

Simple CSS floating

Is there a way in CSS to make it looking like this - so the elements can use empty space above them?

More compact - uses empty space above the elements

Without JavaScript, if it's possible.

Thanks, Martin.

+1 for the excellent image mock-ups – Matt Coughlin Aug 13 '12 at 23:26 — Matt Coughlin, Aug 13 '12 at 23:26
Duplicate of http://stackoverflow.com/q/11940430/963514 – Systembolaget Aug 14 '12 at 12:52 — Systembolaget, Aug 14 '12 at 12:52

score 9 · Answer 1 · answered Aug 13 '12 at 21:29

9

No, this can't be done in CSS. Best way is to use a javascript item called masonry I'm afraid.

http://masonry.desandro.com/

answered Aug 13 '12 at 21:29

Billy Moat

20,792
7
45
37

Matt Coughlin · Accepted Answer · 2012-08-13T22:30:17.067

For tiling dynamic content both horizontally and vertically, the CSS options are:

float:left, as you've already seen, only offers limited horizontal tiling.
display:inline-block gives a different result than float:left, but with no tiling.
CSS multi-column layout isn't fully defined yet. It supports vertical flow into implicit columns, but probably not in a way that qualifies as tiling.
flexible box layout isn't well supported yet. It supports a type of horizontal or vertical flow that might not qualify as tiling, though it feels like a step in the right direction.

In short, even the CSS standards that aren't fully defined yet don't seem to support this; so it may be a long ways off. The simplest fallback option is to use a jQuery plug-in.

Besides Masonry (as @Billy Moat suggested), another couple jQuery plug-ins are Isotope and Tiles Gallery. Masonry seems to be mentioned the most often.

score 1 · Answer 3 · edited Aug 23 '12 at 05:41

1

lets say that the number of px to go up to fill the space of 1 block is 50px. margin-top: -50px;

It's not magic, it's only a bit manual to do that for each ones. If your content is dynamic, this could not work, or need js to calculate if we need to go up or not, on multiple rows and everything.

edited Aug 23 '12 at 05:41

RDX RaN

307
4
20

answered Aug 13 '12 at 21:33

Che MAUVAIS COMPTE

131
8

score 0 · Answer 4 · answered Aug 13 '12 at 21:47

this can be done, but as CHE says, if your content is dynamic, this will go wrong in the worst possible ways.

But if it is a static site, this can be done, for sure.

To solve this, think in blocks & group and align them, inside each block re-align all blocks.

"Better" floating in CSS

4 Answers4