Responsive design’s dirty little secret

Web developer John Albin Wilkins on rounding errors in fluid grids:

I put errors in quotes, because the issue actually has to do with the CSS spec. It doesn’t specify how browser vendors should deal with percentages that contain decimal place precision. For example, with a 6 column grid, each column is 100% ÷ 6 = 16.666667% wide. On a 1000 pixel wide viewport (which I’ve conveniently picked to make our math easier), that calculates to 166.66667 pixels per column. Since the spec gives no guidelines, browser vendors are free to make their own rules.

I’ve learned this problem the hard way several times. It’s a frustrating problem, but John goes on to list several great remedies: adaptive (break point)based design, the CSS border-box element and container-relative floats.