This is a sub-pixel rounding error. It's common in any fluid layout, but becomes most obvious when you do the same math over and over (12 equal columns in a row). When you have a fluid layout, there are times when your container (as measured in pixels) doesn't divide evenly by the % you set. Say the viewport is 966px
wide, and your columns are 10%
. That means each column should be 96.6px
wide. Browsers just don't know what to do with that partial pixel. If you resize your container, you'll see that the layout jumps now and then, and lines up exactly right when the container is evenly divisible.
It's an old problem, and browsers have mostly been getting better at handling it. IE used to round up, which caused even worse layout problems. Now, most browsers are smarter about it, but Safari still rounds down.
There's no way to fix the problem entirely. There are no pixel-exact, fluid, floated layouts, but there are several work-arounds. I start with the simplest, and work my way through the list:
When possible, avoid repetitive percentages. Any one element will only ever round down a partial pixel, meaning you never have more than
1px
error at a time. If you don't stack the errors, they are easier to hide.Float the last item in a row to the right. That moves the rounding error in-between columns, where it is generally less noticeable.
If you really can't minimize or hide the errors, in a gallery-style layout for example, try Jon Albin Wilkins' float isolation method. It's a bulky approach, so I don't recommend it everywhere, but it can be real helpful in some cases. Layout systems like Susy and Singularity will also give you that as an option.
With a combination of those techniques, you can keep all your rounding errors to a single pixel. If your designs can't handle a single pixel rounding error, you shouldn't use fluid floats, or you should maybe consider the Dao. :)