Home/ Questions/Q 8506107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T02:30:25+00:00

I’m trying to create a fluid CSS grid, it works in Firefox and IE8+

  • 0

I’m trying to create a fluid CSS grid, it works in Firefox and IE8+ but NOT in Safari/Chrome/Opera where the sub-pixel rounding issue becomes visible:

http://jsfiddle.net/bJKQ6/2/

.column {
  float: left;
  width: 25%;
}

The main container has a width of 100%, and if you change the browser size in Safari/Chrome/Opera you can see how the rounded widths are inconsistent.

After extensive reads about the problem I understood that “there is no right or wrong solution” for the sub-pixel rounding, but the Firefox way seems the best compromise to me.
(For example, if I set 4 divs at a width of 25% I expect the covered area to be 100%.)

I would like to know if there is a CSS only solution that I missed, or alternatively some JavaScript to solve the problem.

Thanks!

UPDATE: As of May 2014, Chrome 33 and Safari 7 seem to have picked up the “Firefox way”.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Stubbornella’s OOCSS framework (links below) grids module deals with this by giving the last column the following overrides:

    float:    none;
overflow: hidden;
width:    auto;

    This allows it to occupy whatever width remains within the container.

    A bit of browser-forking (IE, ptzsch…) is necessary to get the same behaviour:
    https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css
    https://github.com/stubbornella/oocss/wiki/grids

    • 0