desandro/masonry — Issue #166: Fluid layout fails in Firefox
Author: restless
Created: 2012-01-13 11:52:41+00:00
State: open

I'm trying to get fluid layout to work with my responsive web page. However there is a problem with Firefox (I use 9.0.1) and multiple columns. For example I have something like:

```javascript
$('#container').masonry({
itemSelector: '.box',
columnWidth: function( containerWidth ) {
return containerWidth / 2;
}
});
```

so I should get 2 columns but for some widths I only get 1 column.

It is not a problem with my code! I can observe the same behavior at Fluid demo (http://masonry.desandro.com/demos/fluid.html) Just try to slowly change width of browser window to see column flickering: 5 columns then 3 then 5 then 3 then 5... I can't reproduce this behavior in Chrome.

It looks that there is some problem with rounding, or with gutters? Personally I don't understand how is gutterWidth related to margins of my ".box" elements. It is also not possible to use a function call for this value so it's hard to make gutters fluid.

There was a similiar issue some time ago - #134, and the guy there solved it using some clever javascript:

```javascript
var width = $('#feeds').width() - 4;
$('#feeds').masonry({
columnWidth: (width / 2) - ((width * 0.025) / 2),
gutterWidth: width * 0.025,
isResizable: false,
});

$(window).resize(function(){
var width = $('#feeds').width() - 4;
$('#feeds').masonry({
columnWidth: (width / 2) - ((width * 0.025) / 2),
gutterWidth: width * 0.025
});
});
```
(see his page http://mtmfinancial.ib3.co.uk/news).

But this is probably not the way you wanted fluids to work.