Fluid layout fails in Firefox

[restless]

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:

$('#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:

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.

[desandro]

Looks like Firefox calculates percentage widths a bit different than WebKit. An easy fix is to allow a wee bit of wiggle room in your CSS layout so that the columns don't add up to 100%. Let's say that you layout uses something like the following:

/* for two columns, 2 * ( 42.5% + 2 * 3.75% ) = 100%
.item {
  width: 42.5%;
  margin: 3.75%
}

Just tweak a value so that it equals less that 100%

/* for two columns, 2 * ( 42.5% + 2 * 3.7% ) = 99.8%
.item {
  width: 42.5%;
  margin: 3.7%
}