CSS Responsive grid 1px gap issue

Question

I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.

Inside these block are are images which are set to either 100% *height/width* or 50% *height/width*.

All the images within the blocks a butted up next to each other, and all the blocks are butted up next to each other so it looks like a seamless grid of images.

The issue I'm getting is at certain browser sizes or when you resize the browser you get a little 1px gap between certain blocks.

An example can be seen here: http://dahliacreative.com/responsivegrid/

I think it may be down to the blocks floating as if you take the float off all seems fine. I tried using display: inline-block etc, but couldn't get anything working!

Does anyone have an idea to fix this ?

Answer 1

This is due to using full round percentages such as 50%, when you get to certain widths and heights (e.g 561px * 393px) then those won't divide into 50% evenly hence this remaining 1px gap.

Have a look at twitter bootstrap CSS to see the percentages done to 6 decimal points to avoid this issue.