The Price Of Floats

There have been published two great articles recently on tables as vehicles of presentational design: An Objective Look at Table Based vs. CSS Based Design by Andy Budd and Tables? Oh, the horror! by Dave Shea. For those who don't know these two guys are among the most respected people in the "designer community". All in all both articles are about seeking balance in using tables for layout.

Dave makes an excellent point:

Floats, then, are the more reliable way to achieve your three columns. Except that they have their own glitches too. The most popular browser on earth, IE6, has spectacularly inconvenient error-handling in this regard. Anyone who has built more than one or two sites with floats knows what I’m talking about: a placed element too wide for its container, be it an <img> or a <pre>-wrapped chunk of text, will cause the parent element to grow to contain it. Other browsers let the content overflow to no ill effect other than a bit of overlapping, but because the parent element resizes in IE, the column gets bumped all the way below the others and you have a situation no one is happy with.

I prefer floats over absolute positioning for that exact reason—it's difficult to position footers when you have two columns of unpredictable length and you don't know which one might be longer.

Today it occurred to me I could demonstrate what Dave was talking about. Head over to my other post of today, Total Confusion Over ASP.NET 2.0. Now, in the sidebar switch to a larger font by clicking the leftmost 'T'. Oopsie! The sidebar is gone! Scroll down. Aaaah, there you are. Randy's post happens to have a long URL which exceeds the length of the main column, causes the parent to stretch, and pushes the sidebar down. That's a pretty damn ugly behavior.

Check out the same page in Firefox and Opera. Firefox simply overlays both columns a little which I'm ok with, while Opera nicely wraps the URL around. No harm done.

Randy, I'm not putting you on the spot. It's not your fault. I appreciate your readership. It's the browser's fault. I've done all I could to carefully measure and position both the sidebar and the supporting text column, but IE has a mind of its own. I won't edit the post and will leave everything as-is for educational purposes.