Take the 2-minute tour ×

I'm working on my blog which when viewed in > 1020px wide will look like this, using three columns which will load posts in left to right (i.e. place post 1 in the left column, post 2 in the middle, three in the right, then start from the left column again):

enter image description here

This works great, however when the browser reduces down below 1020 the layout will convert to a single column. This is visually easy to achieve by placing the columns underneath each other (looks fine), but this causes the posts to be out of order - the first three posts if there were 9 posts total would actually be post 1, 4 and 7.

I want to maintain the cleanliness of pure CSS managed layout, so I'm wondering if there's a trick to having the above three column layout with floated elements in a single container (rather than three columns).

I've played around a little bit with just floating left and clearing after every three tiles, but that of course just ends up placing every three tiles in a 'row' underneath the tallest tile in the 'row' above.

share|improve this question
Related: stackoverflow.com/questions/12327281/… –  JCOC611 Sep 21 '12 at 0:03

1 Answer 1

up vote 5 down vote accepted

I know you said you wanted pure CSS but the jQuery library Masonry is specifcally designed for this kind of stuff.


Otherwise I have not found a good way of achieving this with pure cross browser compatible CSS.

share|improve this answer
Interesting.. And tempting. –  Marty Sep 21 '12 at 0:02
+1 As Petah states Masonry/JS is probably the only way... the main thing that causes the problem using pure CSS is where your leftmost item is shorter than items in other columns... in your example the leftmost items are small and directly touching... in a floated version this wouldn't occur as the second leftmost item would always be pushed below the height of the rightmost. –  pebbl Sep 21 '12 at 0:06
After the ease of implementing this it seems almost foolish to do it any other way. –  Marty Sep 21 '12 at 1:34

Your Answer


