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

• Netscape 4.x, if forced, will display this layout, but not well. For example, columns will overlap, spacing will not be even, and if the HR is used to keep the size (see right), they will appear as a small dot will appear in the centre of the column.
• Internet Explorer doesn’t support the min-width attribute, so a new "holder" DIV is created around the three main columns. A fixed-width element (like an HR or an image) should be used to maintain those DIVs’ width.
  • In IE 4, this is best done in JavaScript.
  • In IE 5+ use Microsoft’s proprietary Conditional Comment.
  • In IE 6 (in strict mode only) does not need the "holder" DIV, just an HR resting outside of the DIVs.
• There is an issue in Opera with min-width in the left and right DIVs that causes the text to spill out of the container. This is fixed by not having that attribute in the DIV#left and DIV#right
• There are no known issues with the Gecko-based browsers like Mozilla and Netscape 6.x. If you notice any, please contact me.

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.

Right

This demo uses the Conditional Comments “hack” to fix the layout in Internet Explorer 5 or higher on Windows. In that browser HRs are coloured green or red.

For actual use, they should be styled: visibility: hidden. To accommodate Netscape 4.x, they should be styled width: 0 and should have left- and right-margins equal to halve that DIVs min-width.

The red HR matches the min-width of the BODY, the green ones are sized to match the min-width of their containing DIVs.

There is also a JavaScript “hack” combined with Conditional Comments to create the HRs for Netscape 4, IE 4, and IE 5 on the Macintosh. This “hack” writes the appropriately classed HR.