Main Content

Some dummy text for test

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit

Li Europan lingues es membres Test link del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit\u1824e un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit\u1824e un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser nece

Changes

2005-05-20
- [chg] Using @import "my3cols.css" now instead of the same with single quotes to support IE 5 on Mac
- [del] Removed that iframe workaround for MSIE; it didn't display the CSS file inside the frame anyway
- [new] Added this changelog
- [new] Some styling for del and ins tags
- [new] Added one div with class setting the background color to fix the MSIE problem with footer
- [chg] Renamed the col class to colwrapper

Technique

All columns except the main (appearing as first in the code containing the wrapper for main content and having width: 100%) are positioned using float: left, while their left margin is set to negative values. See the source of this page to learn more about how the divs are placed. My solution uses only two little (CSS valid) "hacks":

The "Underscore hack"
"Display: table" property (Opera needs also one div wrapper more for display: table-row)

See the CSS code to find them ;-)

Compatibility

This layout was tested by me and works successfully in these browsers:

Firefox 1.0.4
MSIE 6.0
Opera 8.0 (i'm just wondering that the object tag to display the CSS file doesn't work in Opera ?)
Konqueror 3.4.0

It was also reported by others that it's working in:

MSIE 5.0 and 5.5 (WinXP Pro)
Safari 1.3, Opera 7.54 (Mac OS X)

Known Issues

Fixed using an additional div with one new class named footerbgtrap. The name comes from the fact that the center main column wasn't actually overlapping but the footer's background was escaping from its div some pixels up. So the background color needed to be trapped inside another div to fix this weirdness in MSIE: ~~MSIE 6 has some rendering problems with the footer part (center column overlaps but when you scroll up/down it get's fixed sometimes)~~
Fixed by removing the unnecessary background color property from the #maincol div: Unfortunately this floating solution still has one big issue in Konqueror – when the content of middle column is longer (vertically) than the browser's viewport, the left and/or right column dissappears :-o.

Header