The Goal

A two-column layout where each column can have a separate background color that runs the entire height of the document regardless of which column is taller. This is to be done without using any sort of background images, just CSS.

The Idea

This is a layout that shows some weaknesses with CSS. It's simply too difficult to produce with CSS in a manner that remains compliant AND accessible in many different browsers.

The CSS height attribute just doesn't operate like many are use to, especially in standards-compliant mode. Creating two columns and setting a height of 100% won't make both columns run the length of the page.

So to get around this problem, the idea is to create a color mask, made up of DIV blocks, which are then placed in the background using the z-index property and to remained fixed to the window using the fixed value of the position attribute.


Ah hah! IE 6 and below do not support the fixed value for the position attribute. So what now? Well, we fake it. How? Check out this site on fixed positioning under IE. The basics are that you make the main window non-scrollable via the overflow family of attributes. You can then make a background mask and place it inside this non-scrollable window. Because the window can't be scrolled, that background will stay in place.

On top of this fixed background we put new block which we specifically set to scroll and place our content inside. This way we retain the ability to scroll the content while a fixed background is placed underneath it. It's pretty tricky but works.

The only drawback is that we need to use IE-specific conditional comments which allows us the opportunity to create a stylesheet that ONLY IE will load.

For the rest of the browsers out there, we just use the fixed value for the position attribute. Everything becomes jake.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Stylesheets used in this page:

A nice treat to this way of managing CSS is that you can create a print.css and include parts of the screen layout, such as fonts.css, so that way the print can have some similarities to the screen.

Compatibility you ask? Well we use @imports to load up the CSS, so Netscape 4 and below won't see any formatting at all. However a NN4-safe stylesheet could be made to try and enhance the bland look a little bit.

Only problem is that this column is placed BELOW the content column when CSS is not applied. Another version of this layout has this column first in the document flow. This means this column is displayed first in non-CSS browsers.