Main
CSS
I am listing here only the rules related to layout.
Important note: Make sure to zero out the margin on body to avoid a jump when hovering over links in the right column (IE Win).
Image names and paths are simplified.
Using @import:
#outer_wrapper {
/* because "min-width" is not supported by IE, these pages use CSS expressions */
min-width:770px;
/* 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;
/* to avoid a background-painting bug in IE Win, we need to give layout to this element. "zoom" takes care of IE 6, but fails in IE 5. To fix both versions at once it is better to use "height:0" inside a Conditional Comment */
zoom:1
}
#header {
border:1px solid #b0b0b0;
background:#b0b0b0
}
/* we use the 2 rules below to make sure there is no gap between #wrapper and #header in IE5 Win */
#header {padding:10px 0}
#header p {margin-top:0}
#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
}
#main * {
/* to kill a 3px jog in IE/Win, we need to give layout to elements contained in #main (you should move this rule inside a Conditional Comment) */
zoom:1
}
/* 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
}
/* this is to make sure IE (v6) *displays* everything inside this element */
#sidebar * {
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.
