25

Possible Duplicate:
Evenly distributed height of child elements with CSS

Lets say i have a design with 6 DIVs that are float left with a width of 16.666%. So the document size is splited in 6 parts.

Now if i have a document size of lets say 620px wide this would make each part 103.333px. Since i don't know screens that can show partial pixels :) I wonder how the browser handles the partial pixels.

Here is my testcase: http://jsfiddle.net/dhQh2/ (Just resize the window to get a result)

When resizing it seams that the 6 DIVs keep the same size. But it some cases it can't be. How does the browser handle those partial PX values?

Community
  • 1
  • 1
meo
  • 30,872
  • 17
  • 87
  • 123
  • I'd like to see the answer to this :) – Pieter888 Apr 07 '11 at 13:39
  • +1. and for bonus points, how do you take into account pixels used up by a 1px border which is (outside the box model, so those pixels get added to the total box size) – Spudley Apr 07 '11 at 13:41
  • 3
    It's the same as this: http://stackoverflow.com/questions/5115637/evenly-distributed-height-of-child-elements-with-css This question has been asked quite a few times before. Different browsers handle the rounding differently. That question I linked has relevant links in the comments. – thirtydot Apr 07 '11 at 13:41
  • Looks like it's just rounding to the nearest pixel, so that they're all an equal width. You're not going to visually notice a difference of a couple of pixels, unless you have code to provide you with the numbers. – Anthony Grist Apr 07 '11 at 13:42
  • @Anthony Grist: actually i do because i have page where i have cubes, with a width of 16.666% and i adjust the height according to the width of each div. Sometimes one div is higher then the others. Strangely only when the browser window gets very large. (like more then 1200 pixels wide). I wantend to understand how the browser handles this to solve the problem. – meo Apr 07 '11 at 13:54
  • @thirtydot thank you. The JS Code in the answer gave me the solution i am looking for here. I did not find this one over the search :/ because i was looking for the width. Can you pack the conclusions of this in a Answer? So i can give you the right one. – meo Apr 07 '11 at 14:04
  • meo - is that consistently one box rather than another, and the same in all browsers? – shanethehat Apr 07 '11 at 14:05
  • @shanethehat its kinda random, and i have found this problem in Chrome and FF. Not in safari and IE. – meo Apr 07 '11 at 14:07
  • For reference, partial pixels are possible and sometimes useful, just not commonly used. (I've seen FF/Mac use them, though it was for char spacing rather than box width.) If allowed, it'd likely be done via antialiasing, which can cause ugly fuzziness for a 1px line. – cHao Apr 07 '11 at 14:09
  • someone edited my JSFiddle, interesting: http://jsfiddle.net/dhQh2/5/ – meo Apr 07 '11 at 14:21
  • On a european browser or on an american one? :) – FelipeAls Apr 07 '11 at 14:30

5 Answers5

18

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:

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?

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
6

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.

Luca Fagioli
  • 12,722
  • 5
  • 59
  • 57
2

See this post:

Are the decimal places in a CSS width respected?

Community
  • 1
  • 1
Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • this does partially respond to my question. What happens when the full width is used? The browser need to do something that the div's fill the full space... But i can't figure out what happens with the link you have posted. Did i miss something? – meo Apr 07 '11 at 13:59
1

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.

sauerburger
  • 4,569
  • 4
  • 31
  • 42
1

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 :)

Freesnöw
  • 30,619
  • 30
  • 89
  • 138