Eliminating dead space in masonry-like float layout

Question

I am working on a product page layout that has two columns with various height items. I am trying to avoid nesting the items in two column containers, so that I can have optimal order of elements on small screens that go to one column.

The problem I am running into is that sometimes the second block (floated left) is longer than the first block (floated right), and sometimes the opposite is true. The problem occurs when the third block is given clear: left to make sure it's as far right as it can go, the fourth block will not go above the top of the third block.

Here is a CodePen with the code: http://codepen.io/anon/pen/jAQdEK?editors=1100#anon-login

Related - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Aug 09 '16 at 15:15
This is possible with flexbox but, in general, it requires a known height of the container. — Paulie_D, Aug 09 '16 at 15:39

score 0 · Answer 1 · answered Aug 09 '16 at 14:54

0

What you want to do looks like a layout table to me. Using display types table, table-row and table-cell might be an easy and solid solution for that. See:

http://codepen.io/wortwart/pen/grQqzv

answered Aug 09 '16 at 14:54

wortwart

3,139
27
31

Not exactly what I'm looking for. I would like the blocks to only be as tall as the content in them, rather than share the height of the taller block next to them as in your example. – Travis L Aug 09 '16 at 15:08
Sorry, I misread your requirements. Maybe flexbox is the right thing for your problem if you can afford to ignore IE <= 9. – wortwart Aug 09 '16 at 15:27

Eliminating dead space in masonry-like float layout

1 Answers1