Div doesn't fill container 100% of the way when shrunk

Question

Let's say hypothetically you have 5 divs. One is a container and the other four are children. You've set each one to be 25% of the container and you've given each one a background separate from the container background.

When you resize the browser your 4 divs at some point in time do not go all the way across, they might be a couple pixels off. Is there a way to stop this form happening? I'm assuming it's happening because it's 'snapping to each pixel' therefore leaving a small gap when resizing the browser.

25% width not going all the way across

#container { 
    width: 100%;
    background: #000;
}
.children {
    width: 25%;
    float: left;
    background: #fff;
 }

JSFiddle: http://jsfiddle.net/AEvUL/

Screenshot of JSFiddle page in safari: http://cl.ly/image/1o1O2O401E0f

A small gap? Don't think that happens. Might be something wrong in your code. Can you show it? — putvande, Dec 23 '13 at 18:12
I don't see any, in fox or in chrome, do you have other styles in your stylesheet? — Mr. Alien, Dec 23 '13 at 18:15
Try clicking and shrinking and resizing, it always shows up for me. I'm in safari btw — jsheffers, Dec 23 '13 at 18:16
This occurs only when you zoom in, correct? It's a known problem because of rounding errors. No solution exists (as far as I know) — isick, Dec 23 '13 at 18:17
Can't get it to happen in chrome, but it happens in safari. No I am not zooming in — jsheffers, Dec 23 '13 at 18:17

score 2 · Accepted Answer · edited May 23 '17 at 12:31

John Resig has a post about this issue that uses this exact case as its example.

http://ejohn.org/blog/sub-pixel-problems-in-css/

Take the following page for example. You have 4 floated divs, each with a width of 25%, contained within a parent div of width 50px. Here’s the question: How wide are each of the divs?

The problem lies in the fact that each div should be, approximately, 12.5px wide and since technology isn’t at a level where we can start rendering at the sub-pixel level we tend to have to round off the number. The problem then becomes: Which way do you round the number? Up, down, or a mixture of the two? I think the results will surprise you, as they did me.

There are also several Stack Overflow questions on the subject:

I figured it was something like this, just wasn't sure if there was a quick fix. — jsheffers, Dec 23 '13 at 18:26

Div doesn't fill container 100% of the way when shrunk

1 Answers1