Where do the lost pixels go in a percent CSS layout? [duplicate]

Answer 1

See this post:

Are the decimal places in a CSS width respected?

Answer 2

They go in the heaven of pixels ;)

Just joking. Most likely different browsers deal with it in different ways.

The first approach coming in my mind, is to calculate the width of each area. Then round it to the nearest int. The rest of the pixels gets just left empty.

Another approach, could be filling the last area, whatever it is the width (with a small margin of errors).

Very interesting question: it could be nice to have the control over this behaviour with css indeed.

Answer 3

If, for example, you're using a % width, and the exact width should be 103.333px, then the browser must make a decision on how display that.

Different browsers make different decisions, read these links for more information:

• http://ejohn.org/blog/sub-pixel-problems-in-css/
• http://elasticss.com/determination-of-algorithms-used-for-percentage-based-rounding-divs-on-browsers-and-css-frameworks/

I particularly like this explanation from John Resig/David Baron of why this is even a problem:

I was talking this over with some Mozilla developers and David Baron explained the situation quite well:

We’re trying to meet a bunch of constraints that can’t all be satisfied at the same time (the proof is left as an exercise to the reader, though I may have actually written it out once in a Bugzilla comment):

1. 4 adjacent objects of width/height 25% (for example) starting at one edge of a container should end exactly at the other edge; there should never be an extra pixel in the container and they should never be wrapped due to being a pixel to wide

2. objects that are logically adjacent should always touch visually; there should never be a pixel gap or a pixel of overlap due to rounding error

3. objects given the same width should occupy the same number of pixels

4. object boundaries should always (visually) be aliased to a specific pixel boundary in the display (they should never be blurred)

The one [Mozilla] sacrifices is typically (3), except for borders where we sacrifice (1) by rounding the widths to pixel boundaries much earlier.

See this question for a JavaScript fix that forces consistency:

Evenly distributed height of child elements with CSS

Another relevant question:

Are the decimal places in a CSS width respected?

Answer 4

Depending on what browser you are using changes what happens. Some browsers may round the value. Some force it to round up (math.ceil in some langauges) and some round down or "truncate". For example, Google Chrome truncates the decimals.

You can easily test the effects of this by print screening and then later checking the size in a paint editor (paint, paint.net, adobe photoshop, etc.)

Very interesting question, however :)

Answer 5

Firefox 4:

THe div around these 6 divs has a border. When you slowly resize the whole window you see that the border "jumps". This means all the divs have the same width, but the sum is less/more that 100%. When you resize just the containing div pixel by pixel, you see that not all the divs change the width simultaneously.