Problem with fixed width layouts and percentage based widths

While designing fixed width layouts it is advantageous to use percentage based width for inner containers in the layout to make it easy for easy scaling up of the layout for other widths. When doing so you should be very careful about setting the actual percentage values. The percentage based width should result in a whole integer as the width. If not, you will end up with fractions as widths of containers leaving the rounding off to the browsers.

Doing so would potentially resulted in unexpected behaviors in some unknown/untested browsers. We came across one such case recently where a 1px thin right border appeared in a container in Opera and Chromium. The border was because of the background color of the parent container coming out because the width of the div was calculated as a rounded value based on the percentages.

There are two potential solutions to the issue. One is to set the absolute size to be something that will not result in fractional sizes for the children given the percentages. The other is to set the size of the child elements to absolute pixel values so that there is no question of round. Chose either based on the amount of work required to make the required changes.