Isotope - Fluid & masonry layout breaking into 2 columns

Question

Not sure whats causing this issue but I have a fluid layout whereby my boxes are 25% in width and I have 4 boxes per row. On resize, I've noticed intermittent errors occur whereby the 4 column is turning into a broken two column. See my video here: http://cl.ly/0s172D303X1M3H1v161z (click View in browser link).

I find the problem is inconsistent across browsers, it works in some browsers but not others. Does anyone have an idea how to fix?

The jsFiddle is here: http://jsfiddle.net/TVXve/

Answer 1

I thought I would call attention to your issue over on isotope's github page, as it proved very helpful for me as I encountered this same issue:

https://github.com/desandro/isotope/issues/222

It appears that this is a bug, and you'll need to set your item's width to 24.5%. This then presents an issue with gaps (if you're going for a seamless grid), but should at least help folks get going in the right direction.

Answer 2

I've found that both these plugins work best using absolute px values. Have you tried setting columnWidth to a percentage value?