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.
Saw this raised on the wsg mailing list by you and I think I now understand why my previous designs have suffered because of IE rounding upwards.
Ta
One workaround would be to use 50% width in your regular stylesheets and then use conditional comments to serve ie a style with 49.99% width.
That's a very good point, Keith. I don't know why I didn't think of that.
I heard that this might be a bug in Opera that has been fixed in the nightly builds; I'm going to keep my eyes open to see if it gets fixed.
FYI, looks fine in Opera 9.21 on OS X.
Really? The 49.99% and 49% are different widths? That's good to hear!
You can do a simple workaround to eliminate the float-drop problem: put a container div around the floats, give it a higher width than the original view to make the float boxes fit, and compensate that plus with a negative margin.
Marton, that's a really interesting way of doing it. I might have to try it some time.
Here is my version:
http://sarimarton.dyndns.org/floats/testcase.html
I tested it in IE6/7, FF, Opera, and Safari Win.
I guess the only problem with that is that sometimes you get a horizontal scrollbar… that's what I saw in FF 2.0.0.4.
No, that was because of another example. See your demo, and now mine.
Oh, I see! That's a very cool trick.
What happened to Marton Saris link for test case posted on 3rd July?
It's up again, on that link, but it's my very home machine, so it will be on http://martonsari.com/floats/testcase.html