CSS percentage width roundoff

Is there some sort of standard of rounding off percentages in css?

For example will a width of 1/7, specified as 14,286% still render OK in all modern browsers?

for me, a width of 1/7th seems to render fine in ie6 up to 3 digits after the comma, but it would be nice know for sure.

var x = 14.282;
var result = Math.round(x*100)/100;

May seem like a bad idea to use JavaScript to round a number, I’ve never used that type of measurement before, have you considered pt, px, in, cm, mm?

sorry, I’ve failed to make clear what Im really asking.

The question here is, how many digits is safe to pass to the browser?
Many sites seem to user a width of 33% rather then 33.33333% when specifying a width, but if I have a layout that is 100px wide theres going to be a big gap after 3 boxes that are 33% wide becase 3 times 33% is 99% and the leftover % is 0,01*1000 = 10px.
So I’m wondering, is it safe to go 3 digits after the comma or will it result in problems? Because I noticed that with 4 digits after the comma internet explorer 6 dropped one of my floating boxes because the 7 boxes exceeded the width 100% alltogether. (probably due to a rounding error).

I also know that Safari can choke on numbers that are more than 6 digits.


I don’t have exact details of what browsers do but I have noted the following in the past.

[B]When dealing width Pixels:

[/B]Firefox will round 125.5px up to 126px and 125.4px will be rounded down to 125px.

Opera will treat 126.9px as 126px (but it will treat 126.999 as 127px !!)

IE ignores all the decimal points and treats 126.9999px as 126px.[B]

When dealing with percentages.

[/B]Opera doesn’t seem to take any notice at all of the decimal portion of percentages. e.g 33.9% will only equate to exactly 33%. Therefore for three floats of 33.333% in a 1000px width Opera will show a 10px gap at the right edge.

Mozilla seems to keep a running total of the decimal parts of percentages used and will at the most only be 1 pixel out on the full width.

IE rounds each portion up or down individually and therefore for three floats will possibly be 3 pixels too big thus causing a float drop.

To stop the floats dropping in ie you can apply a negative right margin to the last float that will soak up the extra space. (margin-right:-3px).

For opera there is no cure but perhaps to make the last element fit the space required or to make the elements bigger than needed and apply a larger right negative margin.

This is the reason that most people simply use 33% because then they know it will fit all browsers even if there is a slight gap which depending on the situation may not be noticable. (e.g. the background color of the element behind may hide it.)

I have a short article here about percentage columns that might be useful.

thanks paul, nice.
I was looking for the answer on your website but couldnt find it, you should install “tags” on your site or something so that its more searchable. (or searrchable at all).

When Im relaunching my drupal themes site I’ll give you a link so that your site will have a nice boost in relevant link authority.

you should install “tags” on your site or something so that its more searchable.

If only I had time :slight_smile:

I’m too busy helping others out to even get near my site these days lol :wink: