Question

I’m having a problem with percentage based layout. Here is my code http://jsfiddle.net/uHkXH/

If your are using Safari or Opera on Mac, or IE7 on Windows, or iPhone iPad you will see a gap on the right side. But the width, padding and margin of four boxes should be 100% in total. I cannot understand why there is still a gap.

Does anyone can explain this problem and help me to solve it? Thank you very much indeed!

Answer 1

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