The bug

When dealing with percentage widths (and I assume height), certain UAs do the following

  1. Rounds the percentage down to the nearest integer percentage (i.e. strips off anything after the decimal point). That is — 99.999999% is treated as 99.0%
  2. Uses this wrong percentage for all calculations that follow
I am 509px wide
I am 50.9% wide in a box 1000px wide, so I should be 509px wide. Some browsers round me down to 50% - which then computes to 500px.
I am 500px wide

This pink container <div> is 1000px wide. There is no reason for rounding here!

Something to consider when rounding is required

12.5% Menu Item
12.5% Menu Item
12.5% Menu Item
12.5% Menu Item
12.5% Menu Item
12.5% Menu Item
12.5% Menu Item
12.5% Menu Item

This 1004px box represents the body of a maximised browser in a resolution of 1024×768

In 50% of possible browser widths, strict rounding means that the 8 floats with percentages summing 100% have a computed width of > 100%. Win/IE takes this approach and draws 8 floats of 126px, so the last float actually wraps onto the next line, ruining the intended display. Gecko appears to take a ’smart’ approach and draws a mixture of 125px and 126px boxes, so that 100% is indeed 100% - IMHO all browsers should do the same. At the very least, they should play it ’safe’, and draw 8×125px boxes.