Top

This 3-column, liquid, CSS-based layout is optimized for an 640px width, validates, and works in the fourth-generation or higher browsers.

Middle

Compatibility Notes:

Updated: May 6, 2002

The styles:

BODY { position: relative; min-width: 600px; width: 100%; margin: 0; padding: 0; }

#top { position: absolute; top: 0; left: 0; min-width: 600px; width: 100%; height: 100px; }

#left { position: absolute; top:100px; left: 0; width: 19%; margin: 1% 1% 0 0; }

#middle { position: absolute; top:100px; left:20%; min-width: 360px; width: 60%; margin-top: 1%; }

#right { position: absolute; top:100px; left: 80%; width: 19%; margin: 1% 0 0 1%; }


/* HR styles needed for IE/Win. */

HR.holder { width:600px; visibility: hidden; } /* Equal to 'top' */

HR.left, HR.right { width: 120px; visibility: hidden; }

HR.middle { width: 360px; visibility: hidden; }


/* These HR styles replace the above, and are need for Netscape 4.x.
Left and right margins are half the relevant DIV width */

HR.holder { width:0; margin: 0 300px; } /* Equal to 'top' */

HR.left, HR.right { width: 0; margin: 0 60px; }

HR.middle { width: 0; margin: 0 180px; }


/* DIVs must have a border value set in Netscape 4.x */

DIV { border: none; }

Note: This template does not appear to work properly on IE 4.x or 5 for the Macintosh. Although none of the columns overlap, they do not respect the minimum widths. Also, in IE 5 for the Macintosh, the page may appear to be slightly more than 100 percent wide.

Left

The DIV#top and DIV#middle use the min-width attribute to limit their widths. The BODY has a width of 100% and minimum width of 600px (only recognized in CSS-2–compliant browsers).

Each DIV is absolutely positioned, and has a percentage-based width with a pixel-based minimum width. This allows them to be placed anywhere on the page, regardless of where the DIVs appear in the HTML.

To have the columns flush against each other in all but Netscape 4.x, remove the margin style in the three columns with the id of left, middle, and right and adjust the respective widths.