Main
CSS

I am listing here only the rules related to layout.
Note: image names and paths are simplified

Using @import:

#outer_wrapper {
/* because "min-width" is not supported by IE, these pages use a script from PVII */
min-width:740px;
/* this is to "minimize" an IE bug related to background painting, but because it creates a gap below the footer, the same declaration is also added to #footer */
width:100%;
/* faux-column technique, this is the left one */
background:#fff url(left.gif) repeat-y left
}
#wrapper {
/* faux-column technique, this is the right one */
background:url(right.gif) repeat-y right
}
#header {
border:1px solid #b0b0b0;
background:#b0b0b0;
/* this is to "give layout" to the element and fix some peek-a-boo bug in IE (v6 sp2) */
width:100%;
/* the above declaration creates an horizontal scrollbar in IE, this is to get rid of it */
margin:0 -1px
}
#container {
float:left;
width:100%;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
/* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
margin-left:-200px
}
#left {
float:left;
width:150px;
/* IE doubles the margins on floats, this takes care of the problem */
display:inline;
margin-left:200px
}
#main {
/* the width from #left (150px) + the negative margin from #container (200px) */
margin-left:350px
}
/* good to know: if #sidebar is to be shorter than #main, then there is no need for this rule */
#sidebar {
/* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
padding-left:100%;
/* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
margin-left:-200px
}
#sidebar p {
/* this is to make sure IE (v6 sp2) *displays* this element (same problem as #header, but using a different fix) */
position:relative
}
#footer {
/* see #outer_wrapper */
width:100%;
/* this is to clear #container */
clear:both;
border-top:1px solid #b0b0b0;
border-bottom:1px solid #b0b0b0;
background:#b0b0b0}
/* this is the class that is applied to 2 structural hacks in the markup (see #2 and #5). The first "meaningless" element is used to clear #left in NN6 and the last one is used to clear #container in NN4 */
.clearing {height:0;clear:both}

Using link*:
Note: for NN4, it is important to use root relative paths to images in Styles Sheets.

#outer_wrapper {
/* faux column technique: this background image "contains" the left column */
background-image:url(/root relative path/outer_wrapper.gif);
background-repeat:repeat-y;
border:1px solid #b0b0b0
}
#header,#footer {
/* this is to "force" a 100% value */
width:150%;
/* the background declaration is a trick to make NN4 paint the background color in the whole DIV, not just behind its content */
background:#b0b0b0 url(/root relative path/clear.gif)
}
#container {
/* this is to make sure NN4 doesn't paint a background image in this element */
background-image:none;
float:left;
width:auto;
/* both padding and margin are needed to leave room for #sidebar */
margin-right:160px;
padding-right:160px
}
#left {
float:left;
width:140px
}
#main {
/* with NN4, background declarations are very important when it comes to positioning elements. The layout breaks if NN4 doesn't have an image to paint in the background of this element */
background-image:url(/root relative path/clear.gif);
/* this is to keep the wrapper inside the viewport */
margin:0
}
#sidebar {
/* this is the background color for #sidebar; I also make sure not to inherit any background image */
background:#ccc none;
margin:0;
padding:10px 0;
/* with "modern" browsers this element is not a float, but it has to be for NN4 */
float:right;
width:180px
}
/* this is the class that is applied to 2 structural hacks in the markup (see #2 and #5) */
.clearing {clear:both}

* Modern browsers do not see these styles because I am using a script to serve the Sheet to NN4.

Please use this contact form to send feedback and report errors.