How to Get Around The Ie CSS Percentage Rounding Problem

CSS percentage with decimals only working correctly in Chrome (Firefox and Opera are just rounding up)

The demo you posted adds 1px border to two of the <div>s. By default this is not included in the 33.33% calculation, so your <div>s will never fit. To change this, use box-sizing: border-box;.

Decimal places in CSS percentage

There are probably many solutions for your problem, I would suggest these:

1. Round on 2 decimals by yourself for all but one, than reduce from
   total width for last one.
2. Use table or display: table, than the
   browser will fix the widths by itself.

Sum of percent widths not rounded to 100%

Maybe with table display?

http://jsfiddle.net/CV6fp/6/

.CENTER {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.BAR {
    height: 10px;
    display: table;
    width: 100%;
}

.SEGMENT {
    display: table-cell;
    height: 100%;
}

.BAR { background-color: #F00; border: 1px solid #000; }

.SEGMENT.ONE { background-color: #FDA; }

.SEGMENT.TWO { background-color: #ADF; }

Fractional pixels are rounded differently in IE and Chrome

You can't change the way that a browser rounds fractional pixels. It's one of the inbuilt differences in the way different browsers render HTML.

Percents rounding for element width in CSS

One thing you could do to help with this is use two decimal places -- ie 33.33% rather than 33.3%. This will reduce the margin of error for any rounding problems.

Once you're at that level of precision, rounding is unlikely to be an issue, but if you do still have a problem with it, or you just want to be precise, you can always do something like this:

div.inner {
  width: 33.33%;
  height: 100px;
  float:left;
}
div.inner:last-child {
  width: 33.34%;
}

...to override the last element so it adds up to 100%.

Overall though, the best bet is probably to stop using floats; unless you need to support ancient IE versions, there are much better options now for building this kind of layout.

Columns, transforms and pixel rounding issue

It's caused because of transform: translate property miscalculation in browsers. Usually by changing object size, padding or margin by 1 or 2 pixels fixes this issue.

Try using width: calc(200% + 2px); for element with transform property.

IE (bug) percentages with background-position

I was recently fiddling around with making a scalable site design based on percentage widths using em. Luckily for me, it was only prototyping because as it turned out, it seems IE ignores anything after the second decimal place. You can see for yourself by loading IE8 and hitting F12 to pull up the development console. Find your CSS with the percentage and see what it says.

Just for the record, my em measurements would have been like this 0.7056367 instead of this 70.56367% which (in my tests) would have become 0.70. It seems very feasible to me, then, that IE is rounding to the nearest percentage point (70%) or the nearest hundredth of a percent (70.56%) at most.

gap in percentage based layout

Its a problem with certain browsers trying to round subpixel (decimal) widths. The percentages are converted to pixels automatically.

If you go through and add up the calculated width in pixels of the elements in your jsfiddle they don't add up to the width of your container element.

Here is some more info
http://css-tricks.com/percentage-bugs-in-webkit/

and

How do I get around the IE CSS percentage rounding problem?

and

Hi,

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

When dealing width Pixels:

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.

When dealing with percentages.

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

How to fix Internet explorer 7 bug when using percentage widths for layout?

The problem is sub-pixel rounding. When you are designing with percentages there will be times that the math doesn't result in full pixels (70% of 721px is 504.7px). 721 is arbitrary, but using percentages you'll run into arbitrary numbers. There's no avoiding that. Most browsers figure out a rounding solution for you that doesn't break the layout. IE7 (and older) simply round up. Rounding up, your container width at 721px will include one box at 505px and another at 217px for a total of 722px - more than 100%. At that point IE decides the second box can't fit and drops it below.

There are various solutions depending on your situation. Nicole Sullivan has an interesting solution based on using 'overflow: hidden;' on your last column rather than a float/width combination. I use it when I can. Check it out here:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

The other solution that I've found when 'overflow' just wont cut it is to add a small negative margin to the last element in a row. If you are floating left, add a several pixel negative margin on the right. Floating right, add it to the left. I haven't run into any negative effects from that (though I'd be glad to hear if others do).

Hope that helps. Cheers.

---

Related Topics