This 3-column, liquid, CSS-based layout is optimized for an 640px width, validates, and works in the fourth-generation or higher browsers.
Updated: May 6, 2002
HR
is used to keep the size (see right), they will appear as a small dot will appear in the centre of the column. 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 DIV
s’ width.
DIV
, just an HR
resting outside of the DIV
s.min-width
in the left and right DIV
s 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
BODY { position: relative; min-px; %; margin: 0; padding: 0; }
#top { position: absolute; top: 0; left: 0; min-px; %; px; }
#left { position: absolute; top:100px; left: 0; %; margin: 1% 1% 0 0; }
#middle { position: absolute; top:100px; left:20%; min-px; %; margin-top: 1%; }
#right { position: absolute; top:100px; left: 80%; %; margin: 1% 0 0 1%; }
/* HR styles needed for IE/Win. */
HR.holder { px; visibility: hidden; } /* Equal to 'top' */
HR.left, HR.right { px; visibility: hidden; }
HR.middle { px; 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 { ; margin: 0 300px; } /* Equal to 'top' */
HR.left, HR.right { ; margin: 0 60px; }
HR.middle { ; 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.
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 DIV
s 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 width
s.
This demo uses the Conditional Comments “hack” to fix the layout in Internet Explorer 5 or higher on Windows. In that browser HR
s are coloured green or red.
For actual use, they should be styled: visibility: hidden
. To accommodate Netscape 4.x, they should be styled and should have left- and right-margins equal to halve that
DIV
s 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 DIV
s.
There is also a JavaScript “hack” combined with Conditional Comments to create the HR
s for Netscape 4, IE 4, and IE 5 on the Macintosh. This “hack” writes the appropriately classed HR
.