Fluid grid is not scaling correctly

Question

I have this fluid grid with a max-width of 1280px.

It consists of five column setup - grid2, grid4, grid6, grid8 and grid10.

Overall and at first glance it looks good, but when inspecting the code (inspected in firefox and google chrome) the smallest spot (grid2) is one pixel smaller in height.

At max-width the height should be 320px as the rest of the spots, but it is only 319px.

I cant get this working properly.

See my fiddle: http://jsfiddle.net/4ya94/

.grid2 {
    width: 18.72%;
}

I hope any of you can help \O/

Answer 1

This is due to subpixel rendering.

Your defined divs width is 1280px * 18.72%; which is 239.616px

The width/height ratio is 240px / 320px = 0.75

So the height will be 239.616px / 0.75 = 319.488px which is then rounded down to 319px

For your ref: Per CSS 2.1 Specification in section 10.6.1

if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:

(used width) / (intrinsic ratio)