Home/ Questions/Q 8374241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:52:44+00:00

I’m experimenting with CSS and the float property. I have this website, with a

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0