Friday, October 1, 2010

Dealing with rounding errors

Problem: In liquid layouts with floated elements, rounding errors sometimes cause the
widths of the elements to add up to more than 100%. This causes one of the floated elements
to wrongly stack under the others. This problem is known to affect all versions of
Internet Explorer. For an example, see the following image (from the “Creating flanking
sidebars” exercise in Chapter 7), in which the right-hand sidebar is wrongly sitting underneath
the left-hand sidebar.
Solution: As explained in the focus point within the “Creating flanking sidebars” exercise,
rounding errors can be dealt with by reducing one of the percentage values of a column
by as little as 0.0001%, although sometimes this reduction needs to be increased.

No comments:

Post a Comment