One of the best three columns tableless layouts find out in the Internet is IMHO Skidoo Layout. Personally, I have used it in two projects: http://www.pd.ro/ and in one of our latest projects http://www.urb-s.com/ [under development at the time posting this].

This latest website features some tables with specifications about rollerbearings [URB Rulmeti Suceava S.A. being a rollerbearing manufacturer]. We discovered that these tables were way to wide and the Skidoo Layout was breaking on IE 6.0. I was searching the Skidoo website to find a workaround but did not find anything related to this problem. Instead, I have found an interesting article that gives a workaround for quite the same problem I had but with the images, not tables.

Skidoo layout breaking on IE 6.0

Skidoo layout breaking on Firefox 1.0.6

The solution I have for my problem is to surround the table containg the rollerbearings specs with a <div></div> and to hide the overflow of the table.

/*=================================
CSS Part
=================================*/
div.wideTable{ width: 100%; height: auto; }
html > body div.wideTable{overflow:-moz-scrollbars-horizontal;}
* html div.wideTable{overflow-x:scroll;}

==================================
XHTML Part
==================================



…
…

This workaround fixes both IE and FF as expected!