Okay Paul O’, you offered to help me out some more, so here come a whole bunch of questions regarding your solution above.
Attached is a screenshot of my finished (and working) example. In addition, I am attaching my code in case you need it for reference.
Questions are in BOLD below…
STYLESHEET: 05_ThreeCol_Fixed_Sticky_ColoredCols.css
html, body, h1, h2{
margin: 0;
padding: 0;
}
html, body {
height: 100%; /* Set a baseline for height. */
}
Okay so far…
/* PAGE CONTAINER */
#wrapperMinusFooter {
width: 930px; /* Width of Content. */
min-height: 100%; /* Based on height of <body>. */
margin: 0 auto; /* Center page. */
margin-top: -40px; /* Used to offset Footer height. */
background-color: #CCFFFF;
/* background:url(images/3colbackground.gif) repeat-y 0 0; */
/* Create the illusion of 3 columns with one background image. */
border: 0 1px solid #FFFFFF;
position: relative; /* Containing Block */ /* NEW */
}
We make this selector (position: relative) to create a “containing block” from which all absolute positioned selectors will base their settings on, correct?
* html #wrapperMinusFooter { /* IE6 and under only. */
height:100%;
}
What is * html called again?
What is it that we are doing here again? (This wasn’t in your article but was somewhere else that I forgot.)
/* HEADER */
#header {
z-index: 2; /* NEW */
position: relative; /* NEW */
width: 100%;
color: #FFFFFF;
background-color: #000000;
border-top: 40px solid #FF0000; /* Offset negative margin of #wrapperMinusFooter. */
}
In order to set a “z-index” this selector must be a “positioned” item, right?
By setting the z-index=2 we are placing it on top of our later-to-follow colored absolute columns, right? (I think they are left blank making them have a z-index=0, right?)
Why do we set position: relative for the header?
If there was no background-color would we see our later-to-follow colored absolute columns?
/* NAVIGATION BAR */
#nav {
background-color: orange;
}
Nothing special here!
/* LEFT COLUMN */
#col1 {
z-index: 2; /* NEW */
position: relative; /* Containing Block */ /* NEW */
float: left;
width: 150px;
min-height: 100px; /* If no content, prevent Floats from moving over to fill space. */
background-color: yellow;
}
Same questions as above about why we chose the z-index and position: relative here…
/* CENTER COLUMN */
#col2 {
z-index: 2; /* NEW */
position: relative; /* Containing Block */ /* NEW */
float: left;
width: 630px;
min-height: 100px; /* If no content, prevent Floats from moving over to fill space. */
background-color: #CCFFFF;
}
More of the same…
/* RIGHT COLUMN */
#col3 {
z-index: 2; /* NEW */
position: relative; /* Containing Block */ /* NEW */
float: right;
width: 150px;
background-color: #D685AD;
}
More of the same…
/* FOOTER */
#footer {
clear: both; /* Keep below columns. */
width: 930px;
height: 40px; /* Matches negative margin on #wrapperMinusFooter. */
margin: 0 auto;
background-color: gray;
}
Apparently the clear: both works work the Floats above as it normally would, right? (i.e. our absolute columns won’t mess it up?)
/* OPERA FIX */
body:before {
float: left;
width: 0;
height: 100%;
margin-top: -32767px; /* Negates effect of float. */
content: "";
}
I have no clue what this says or is doing?! If you could take some time to explain it better, that would be fabulous!!
h1, h2, p {
padding: 0 10px; /* ?????? */
}
Does this have any hidden meaning/purpose or are you just adding some padding?! :-/
/* IE8 FIX INSTEAD OF USING DISPLAY TABLE. */
#wrapperMinusFooter:after {
clear: both;
display: block;
height: 1%;
content: " ";
}
I have no clue what this says or is doing?! If you could take some time to explain it better, that would be fabulous!!
/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
clear: both;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: yellow;
}
Apparently the clear: both has the same purpose here as it does on my columns above with Float: Left/Right and position: relative ???
*** Okay, here is where I am particularly confused… ***
Your article mentions that we “attach” the absolute column to the bottom of our “containing block” (i.e. relative div) but here I see you using:
position: absolute;
top: 0;
bottom: 0;
You specifically said…
This technique is based on the fact that if you place an absolute element inside a relative container and set the absolute element to height:100% (or top:0 and bottom:0) it will expand in tune with the parent container…
…but I don’t understand what this does and it seems contradictory when you mention height:100% (or top:0 and bottom:0)
You then go on to say later in your article…
Instead we are going to place the absolute element at the bottom of the relative parent and give it a height of 1000em. Now instead of the absolute element going down the page it starts at the bottom of our columns and travels up the page and out the top of the browser window.
…but I don’t see that in the block of code above or anywhere?!
(In my opinion) This needs to be re-written and explained better!
#three{
clear: both;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
background: #D685AD;
}
More of the same, however, why are we NOT doing this for Column #2???
How is it that Column #2 expands the full height of the browser window when it doesn’t have its own absolute column to do a background color?!
/* IE6 FIX */
* html #one,
* html #three{
height: 9999em;
top: auto;
}
Maybe this has something to do with above, but if you could explain it in detail it would help me to know what purpose it serves and what it actually does?!
WHEW!!! You made it!!
Sorry for all of the questions, but this is actually trickier than it initially looks, and I am seriously about REALLY LEARNING this stuff, so your detailed responses are greatly appreciated!!!
Sincerely,
TomTees