Last Updated: February 25, 2016
·
3.13K
· corysimmons

CSS Masonry IE7+

Update: Can't get the piece of shit column polyfill working. Let me know if you find a decent one.

jQuery Masonry is a pain to implement sometimes.

This is hardly a tutorial and I hate reposting it like it's my own but I want to record this for future use. Let me be clear in giving all the credit in the world to SickDesigner.com's, Radu Chelariu, for coming up with this great CSS masonry solution.

http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

+

This CSS3 columns polyfill + this IE7 inline-block solution + this solution for balancing out columns (helps when you have a dynamic number of blocks to work with - particularly just a few, remove blocks from SickDesigner's demo to see it break)

=

Awesome IE7+ CSS masonry.

I'll update with a working example as soon as I have it.

2 Responses
Add your response

Hey Cory - the CSS3 multi column polyfill probably didn't work because it doesn't really support HTML5 tags. Good news, though - off of the HTML5 Cross-Browser polyfill list maintained by Modernizr comes a more robust polyfill that does support HTML5 elements: https://github.com/BetleyWhitehorne/CSS3MultiColumn

over 1 year ago ·