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?

Improve this question
11
  • I'd like to see the answer to this :) Commented Apr 7, 2011 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) Commented Apr 7, 2011 at 13:41
  • 3
    It's the same as this: stackoverflow.com/questions/5115637/… 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. Commented Apr 7, 2011 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. Commented Apr 7, 2011 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. Commented Apr 7, 2011 at 13:54

5 Answers 5

Reset to default
19

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?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

1 Comment

This actually does make sense. The part about Pixelheaven I mean.
2

See this post:

Are the decimal places in a CSS width respected?

Improve this answer

1 Comment

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

Improve this answer

Comments

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.