CODEWITHSUNDEEP
htmlcss
jsheffers
jsheffers

Reputation: 1622

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

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

Upvotes: 0

Views: 127

Answers (1)

Nate
Nate

Reputation: 4958

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:

Upvotes: 2

Related Questions