A Single Article

Fluid widths and point-nine-nine percent

I was putting together a test yesterday so I could demonstrate the use of fractional percentage widths in CSS and I came across an issue with Opera. The current demo is available over at my web lab: Point Nine Nine Percent Width Demo, and you should take a look at it before reading on. Let me first explain:

There is currently a problem with fluid widths in Internet Explorer (including the latest version) when you have a container at 100% width and two children at 50% width. When this container has an even width value (like 1000 pixels), the two children can be floated side by side without any problems. When, however, the container has an odd width value (like 999 pixels), the two children are both 500 pixels wide (50% of 999, rounded up) and the total width cause a float-drop… the second child sits underneath the first. This is a real pain when you are trying to make a 2-column layout with floats and you want the whole thing to be fluid while taking up all the space from left to right.

Now Firefox (Gecko), Safari (Webkit), and Opera all round down, not up, when calculating percentage widths, so they never show float drops in this situation. Unfortunately, considerations have to be made for IE, so one technique is to use a fractional width for the second child, like 49.99% instead of 50%. This way, the second child’s width is calculated as slightly less than half and rounded down by IE instead of up, and the two children always sit side-by-side. I’ve done this in the past, but recently I discovered something very disappointing: Opera completely ignores fractional percentages. 49% == 49.6% == 49.99%. View that demo page in Opera and you will see what I am talking about.

What does this mean? As far as I can tell, there is no reliable way to make fluid-width columns with CSS that works in every browser. There is a way that works in Gecko, Webkit, and IE, and another way that works in Gecko, Webkit, and Opera, but there is no way that works for both. There are some other workarounds that I know of, but it would be really nice if there was a way to do this right. I just don’t know of it. And as far as I can tell, it’s entirely up to the browser to decide how to handle fractional percentages. I can’t even say that Opera has a bug or is wrong… it just works that way.

In the end, fluid design is what suffers, since this makes it a real pain to handle across browsers. If anyone has input or ideas on this issue, please share.