Question

Layout 0 shows how I can achieve this layout with a simplified view of the css.
I need help / suggestions / ideas on how to created layouts 1 and 2.
The blocks can be rendered in any order and they are fixed width (either 25% or 50% respectively – as in layout 0)…spanner in the works is they dont have a predefined height.

I would much prefer a css only solution each layout will have its own parent/container div so if positioning is best for one row and floating better for another then so be it.

Answers on a postcard… thanks all

P.S. can I avoid answers that refer me to js librarys like http://masonry.desandro.com/ for example…

Answer 1

I’d wrap 2 columns in a div (2 small divs in 1 big with width: 25%) and make them all float: left (except divs which are wrapped).