If I am using a 3-Column, Fixed-Width layout combined with the “Sticky Footer” approach, is there a way to get the background color of each column to expand all the way down to the footer?
The only way I have seen to do this, is to create a 3-colored image slice (i.e. a different color on the slice for each column) and repeat it vertically.
I would prefer doing the same thing but not being dependent on using a background image to accomplish this.
Any ideas?
TomTees
or 100% min-height for that matter.
It’s about whether one embraces their inner artsy type or not – what’s more important? Conveying the information to the user in a clear/concise manner or hanging a bunch of goofy graphics around the content?
There’s a reason REAL websites (amazon, ebay, google) are light on the graphics – they don’t need it as they have content of value. It’s why the approach to site building I advocate is content FIRST. Write your page content, mark it up semantically so people who won’t see your goofy graphics and things like search engines have meaning, THEN create your layout in CSS, and finally last start up the goofy paint program to make graphics to go on your layout.
The approach beats the tar out of creating a layout and then shoe-horning content into it.
It’s why PSD “designers” (and I use that word VERY loosely) with their pixel perfect designs are usually a miserable /FAIL/ right out of the gate. Not only do usually have zero knowledge of things like accessibility guidelines, they also tend to design elements that while very pretty in photoshop are impractical/overcomplicated to actually code into a page.
Websites are only as complex as you make them – and if you get your heart set on a certain layout effect you quite often have shot yourself in the foot before you’ve even started. You start with a layout with graphics and don’t vary from it in the coding process, you’re already tying your hands behind your back and lining yourself up for a kick in the balls.
2.) In the example you gave me at this link…
http://www.pmob.co.uk/temp/3col-stic…r-min-max2.htm
I had a really hard time following your code - especially when it came to the absolute “faux” columns.
You should refer to the original article for the details as it is still the same concept. It’s the idea you need to understand as the implementation may vary slightly between layouts.
My code and screenshots above seem to accomplish everything you were teaching me, but I felt like the final version of my code was much more streamlined and thus easier to follow, and yet it yielded the same end results.
If I am missing something between my example and your example, please correct me.
Here are some snippets of your code from the link above…
[COLOR=Red]***Oops, it looks like you may have already edited your code from what I was going off of the other day, so my comments may be moot?! **
[/COLOR]
I think you may be confusing it with another of the examples as the one above has never changed since I wrote it a 2 years ago. it is pretty clean but has one extra div to cater for the three source order floated columns (another complicated and advanced concept).
[B]
One of the code examples I was going off of the other day had all of these funky “absolute coordinates”…[/B]
You had Faux Column #1 with Left: 0, and then Faux Column #2 at like Left: 122 and then Faux Column #3 at like Left: 343 and it went against the logic of the absolute columns being “contained” in a relative column. It was almost as if the Faux Colored Columns were being absolutely placed on the screen??
They are absolutely placed on the screen 
I’m not sure what you meant exactly.
I think you may be thinking about one of these demos. The column colours are placed with the “left” position to match the floated columns positions. The left position is needed for each column because we are placing them inside the all encompassing parent container. Therefore we have to change the position of the overlay to match the position of the floated columns. We use the parent container for this (and not the column itself) because the parent container is the only element that will be as tall as the tallest column because all the columns are inside it. That’s the basis of the technique.
Yes there are a few Opera users running around. I don’t know what the stats are but I would say the majority of Opera users are web dev folks.
IE6 is on a decline thank goodness but it is having a slow death. From what I have heard most IE6 users are govt. institutions or businesses on an intranet that has not been upgraded. Such as libraries, schools etc.
There again I don’t know what the stats are but a lot of Mac users are using Safari. The Windows Safari version was around before Chrome (they both use Webkit engines) was and it allowed window users to get a glimpse of what their page might look like on Safari Mac.
There are a lot of Chrome users out there though. Webkit has very few bugs so as long as you are writing valid code you should not have any major problems with Safari and Chrome.
position: absolute;
top: 0;
bottom: 0;
So this forces the Faux (Absolute) Columns to 100% height in the relative “Containing Block”??
Yes, only for modern browsers and IE7. I don’t consider IE7 a modern browser bit it does work there. IE6 and under will choke on it.
And in the second block of code above, the “star html hack” makes the top: 0 and the 9999em makes the absolute column sufficiently high rising up from the bottom of the window so that it always is there if the text expands downwards?
No, it does not set it at top:0 The top:auto; overrides and negates top:0 for IE6. It is kinda like saying “none” with a border or background that was defined earlier in the cascade. It’s just an override.
IE6 is getting bottom:0, it sets the faux column at the bottom of the wrapper div and extends way beyond the top of the viewport.
But could you mimic what we did in column #1 and #3 if you wanted to?
Yes, it can be used as many times as you want but your goal is to only use it when needed. The wrapper is capable of giving a BG color to the center column so it is the best way to go.
Here is an old demo of Five Equal AP Faux Columns , the last (5th) column gets it’s BG color from the wrapper.
Well, thanks for taking the time to help out!! :tup:
Glad you found it helpful!
Attached is my latest code and a screen-shot of my best attempt at Paul O’s 3-Column, Fixed-width, Centered, with Sticky Footer layout.
(Now that is a mouthful!!) 
It looks pretty good, however, I’m still confused and annoyed about the background colors not extending down to meet my Sticky Footer.
The background color for my “wrapperLessFooter” div goes all the way to the bottom, but “col1”, “col2”, and “col3” do not?! :-/
I am starting to agree with Rayzur that using a multi-shaded background image slice would be easiest. However, I don’t have any software to do that, and I like to know how to solve problems multiple ways.
Paul O’ has been a magnificent resource, however, I was having a hard time following that old link about using absolute div’s to do this.
Again, if my gray “wrapperLessFooter” DIV is reaching all of the way down to my Sticky Footer, then why won’t Columns 1, 2, and 3?
One more thing…
I only have a MacBook, and so I am flying blind here on how my code would look in Windows or Internet Explorer, so that makes learning that much harder at the moment…
If someone could comment on my code and screenshot thus far, it would be helpful.
Thanks,
TomTees
You seem to have implemented most things correctly but you have added borders to the 100% element making it 2px too tall and hence the scrollbar when none is needed.
As you aren’t using a background image then you can only make full length columns in the ways that we have shown you. I prefer the absolute column technique and added to your code would look like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="04_ThreeCol_Fixed_StickyFooter.css">
<style type="text/css">
html, body, h1, h2{
margin: 0;
padding: 0;
}
html, body {
height: 100%; /* Used to base height on. */
}
/* PAGE CONTAINER */
#wrapperLessFooter {
width: 930px;
min-height: 100%;
margin: 0 auto;
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: 1px solid #FFF;
border-top:none;
border-bottom:none;
position:relative;
}
* html #wrapperLessFooter { /* IE6 and under only. */
height:100%;
}
/* HEADER */
#header {
width: 100%;
color: white;
background-color: black;
border-top: 40px solid #000; /* Soaks up negative margin. Allows header to start at top of page. *//* background:blue; /*Cover up background image on #wrapper. */
position:relative;
z-index:2;
}
/* NAVIGATION */
#nav {
background-color: orange;
}
/* LEFT COLUMN */
#col1 {
float: left;
width: 150px;
min-height: 100px; /* In case of no content, prevents Floats from moving over to fill space. */
background-color: yellow;
position:relative;
z-index:2;
}
/* CENTER COLUMN */
#col2 {
float: left;
width: 630px;
min-height: 100px; /* In case of no content, prevents Floats from moving over to fill space. */
position:relative;
z-index:2;
}
/* RIGHT COLUMN */
#col3 {
float: right;
width: 150px;
min-height: 100px; /* In case of no content, prevents Floats from moving over to fill space. */
background: #D685AD;
position:relative;
z-index:2;
}
/* FOOTER */
#footer {
clear: both;
width: 930px;
height: 40px; /* Matches negative margin on wrapperLessFooter. */
margin: 0 auto;
background-color: gray;
}
/* OPERA FIX */
body:before {
float: left;
width: 0;
height: 100%;
margin-top: -32767px; /* Negates effect of float. */
content: "";
}
h1, h2, p {
padding: 0 10px; /* ?????? */
}
#wrapperLessFooter:after { /* Instead of using display table for IE8. */
clear: both;
display: block;
height: 1%;
content: " ";
}
/* absolute background overlay*/
#one,#three{
position:absolute;
top:0;
bottom:0;
width:150px;
clear:both;
}
#one{ background: yellow;left:0}
#three{ background: #D685AD;right:0}
/* ie6 fix*/
* html #one,* html #three {height:9999em;top:auto}
</style>
</head>
<body>
<div id="wrapperLessFooter">
<div id="header">
<h1>HEADER</h1>
<div id="nav"> NAVIGATION </div>
</div>
<div id="col1">COL1</div>
<div id="col2">
<h2>COL2</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
vitae non augue. Praesent sit amet fermentum turpis. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ipsum
felis, eleifend ut congue mattis, iaculis ac quam. Nam luctus
scelerisque felis, ac adipiscing metus facilisis in. Nullam et nisl
eu justo luctus sodales in varius arcu. Nunc enim leo, laoreet vitae
dapibus eget, malesuada nec erat. Nunc bibendum sapien vel lorem
laoreet lacinia. Vestibulum tortor elit, ultrices vitae luctus quis,
iaculis non libero. Quisque imperdiet tristique facilisis. Morbi
dictum, purus quis tempor malesuada, sem libero rhoncus ipsum, sed
gravida elit erat nec velit. Morbi feugiat sollicitudin ipsum luctus
pulvinar. Integer id nisi mi. Sed quis ligula sapien. In pulvinar
commodo arcu vel pellentesque. Quisque eu volutpat elit. Donec dui
tellus, consequat at dignissim et, ullamcorper sed enim. Vivamus et
est dui, ut sollicitudin sapien. Curabitur malesuada tellus eget diam
faucibus dapibus. Curabitur porta nulla ut quam bibendum quis auctor
sem elementum. Sed pretium sollicitudin tellus, eget vestibulum
lectus feugiat dapibus. Mauris vel velit vitae ligula auctor sagittis
vitae non augue. Praesent sit amet fermentum turpis. </p>
</div>
<div id="col3">COL3</div>
<!-- these elements just provide the background colour -->
<div id="one"></div>
<div id="three"></div>
</div>
<div id="footer">FOOTER</div>
</body>
</html>
The technique is explained in full in this article so you need to read it thoroughly. It uses an extra element that is placed absolutely over a column and can provide a full column colour because absolute elements can use top and bottom at the same time and match the height of the relative parent. Only absolute elements can do this.
In CSS you have one shot at 100% height and that’s because you can only use min-height:100% once. The wrapper element bases it’s min-height:100% on the 100% height we applied to html and body. You can only base a percentage min-height on an element that has a height defined. You cannot base a height on an element that is content height or has a percentage min-height. Read the faq on 100% height for more info as it is an important subject.
It’s like a catch 22 situation because you can instead use height:100% on the wrapper and that would allow you to further nest elements of 100% height. However setting height:100% means the element could never grow past the bottom of the viewport and content would just spill out.
As I said at the beginning you are better off keeping things simple from the start especially if you find these issues hard to digest to begin with. We could of course use the display:table properties to get the effect you want but as IE7 and under don’t understand it then it’s not worth the effort yet.
In CSS we usually let the content dictate the height. We let elements contract and grow as necessary unlike a table which keeps making all cells equal.
If it is a fixed width site a BG image is the best way to do it.
Anything other than that requires empty divs for AP faux columns (extra markup & css).
Those are really only needed when it is a fluid width site.
I think Paul had already given you this link in another thread
http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm
Thanks Ray
TomTees, I agree the original article could perhaps be updated but it is an old article and methods do get refined over years so there may be differences in the way we do things these days but the concept is the same.
The basic concept is overlaying the absolute element to provide the colour. Good browsers IE7 and above can use top and bottom for the absolute element but IE6 needs a hack with the massive height and then hiding the overflow in some way (either by letting it shoot through the top of the browser or perhaps using overflow:hidden on the parent depending on situation).
You have jumped in at the deep end though and the concepts you are trying to understand are not simple so it will take time for it to make sense
If Ray has missed any questions or you need more clarification then just shout.
Paul O’,
Just some academic follow-up questions before I forget…
1.) My approach was to have…
<body>
<div id="wrapperMinusFooter">
<div id="header"></div>
<div id="col1">COL1</div>
<div id="col2">MAIN</div>
<div id="col3">COL3</div>
<div id="one"></div>
<div id="three"></div>
</div>
<div id="footer">FOOTER</div>
</body>
but your approach was to add an extra layer as such…
<body>
<div id="wrapper">
<div id="header"></div>
<div id="inner">
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
</div>
<div id="faux-lt"></div>
<div id="faux-rt"></div>
</div>
<div id="footer"></div>
</body>
Why do you add this extra layer? (My code seems to work just as well as yours did.)
2.) In the example you gave me at this link…
http://www.pmob.co.uk/temp/3col-sticky-footer-min-max2.htm
I had a really hard time following your code - especially when it came to the absolute “faux” columns.
(And this is where I was being bold and felt your code and examples could be cleaned up a lot.)
My code and screenshots above seem to accomplish everything you were teaching me, but I felt like the final version of my code was much more streamlined and thus easier to follow, and yet it yielded the same end results.
If I am missing something between my example and your example, please correct me.
Here are some snippets of your code from the link above…
***Oops, it looks like you may have already edited your code from what I was going off of the other day, so my comments may be moot?! **
One of the code examples I was going off of the other day had all of these funky “absolute coordinates”…
You had Faux Column #1 with Left: 0, and then Faux Column #2 at like Left: 122 and then Faux Column #3 at like Left: 343 and it went against the logic of the absolute columns being “contained” in a relative column. It was almost as if the Faux Colored Columns were being absolutely placed on the screen??
Not sure if you follow me, but I was very confused by the CSS in some example I had been looking at.
Your code at the link above looks cleaner and I know my code - with Razur’s and your help - looks much much easier to follow than other examples on the Internet.
So that was another “beef” that I had for what it is worth?!
My head hurts!!!
I think I’ve had enough for tonight!!
Thanks for all of your help!!!
TomTees
I was just saying.
The basic concept is overlaying the absolute element to provide the colour. Good browsers IE7 and above can use top and bottom for the absolute element but IE6 needs a hack with the massive height and then hiding the overflow in some way (either by letting it shoot through the top of the browser or perhaps using overflow:hidden on the parent depending on situation).
I think I’ve got that know thanks to Rayzor’s re-explanation, but it’ll have to settle a bit in my brain!
You have jumped in at the deep end though and the concepts you are trying to understand are not simple so it will take time for it to make sense
If you’re going to drown, I say jump off the deep end and get it over with!!!
If Ray has missed any questions or you need more clarification then just shout.
I basically good for now, and have a really sharp looking start for my Home Page.
(I’ll nit-pick in a follow-up post.)
TomTees
Thanks!!
Does anyone use Opera?
Does anyone use IE6 anymore?
Does anyone use Safari?
position: absolute;
top: 0;
bottom: 0;
So this forces the Faux (Absolute) Columns to 100% height in the relative “Containing Block”??
[QUOTE]The em height with bottom:0 is for IE6. That is done because IE6 does not understand top and bottom together on an AP element.
#three{
clear: both;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
background: #D685AD;
}
/* IE6 FIX */
* html #one,
* html #three{
height: 9999em;
top: auto;
}
[/QUOTE]
So in the first block of code above, top: 0 and bottom: 0 make the absolute columns 100% height in the relative “containing block” columns??
And in the second block of code above, the “star html hack” makes the top: 0 and the 9999em makes the absolute column sufficiently high rising up from the bottom of the window so that it always is there if the text expands downwards?
Column#2 gets it’s BG color from the wrapper div so there is no need for a faux div to color it.
But could you mimic what we did in column #1 and #3 if you wanted to?
Whew is right!
Good questions though
Well, thanks for taking the time to help out!! :tup:
TomTees
I usually go for the simpler option and the faux column approach is something that can be usually down without having to massage the mark up at all as none times out of ten there is a container already in place that you can use.
The absolute columns example of mine that Ray linked to has no such problems as the negative margin/padding method but works at the expense of having to add extra html elements. the benefit is that no images are used and can be used in fluid of fixed containers as required.
The padding/margin method you are using is fine if you have control of the page and don’t have “in-page” links so there would be no need to change.
Most other sites often have “in-page” links though and I like solutions that don’t rely on something always being the same as you can never tell what may happen down the line. A client may add an in-page link at a later date and break the site completely (and believe me the page is completely unusable once you have followed the link as all content above the target link vanishes).
I don’t know what the stats are but I would say the majority of Opera users are web dev folks.
If you are targetting Russia and former soviet states, Opera is just under 40%
If you’re talking mobile though then you are talking about most of the world that’s not Europe or North America. Opera Mini on Nokias seem to be the most-used combination (in one form or another) worldwide.
Safari/Chrome/webkit is big on phones in Europe and North America. The difference there is unlike much of the rest of the world, Europe and NA have computer users more than mobile users… everywhere else it’s often the other way around (mobile users who may not even have a computer).
I remember crusty saying something about IE6 is the default browser on phones running WindowsCE since about 2 years ago… that’s pretty recent compared to the age of IE6. Bleh.
Who is Jason?
Did I miss something?
TomTees
Hi Tom,
I’d need to see the example that the code above comes from to say why it needs the extra code but I’m guessing it’s because the three columns are separate (have gaps between where no background shows) as in that last demo I linked to. For your example we don’t need the middle column because the background from the parent shows through and provides that column color. It provides the background to all three columns actually but because we are overlaying the left and right then all we see is the middle.
However if you wanted three separate columns colours with white gaps between then you would need to paint each column with the absolute column technique which would mean the middle column would be placed at left:xxpx so that it matches the content of that column.
In your example we only needed to place the first and last columns which we did with left:0 and then right:0. Of course in a fixed width layout we could have placed the right column with left:xxpx of course as we know where it should be.
[LEFT]<body>
<div id=“wrapper”>
<div id=“header”></div>
<div id=“inner”>
<div id=“left”></div>
<div id=“right”></div>
<div id=“main”></div>
</div>
<div id=“faux-lt”></div>
<div id=“faux-rt”></div>
</div>
<div id=“footer”></div>
</body>
[/LEFT]
Why do you add this extra layer? (My code seems to work just as well as yours did.)
I use a wrapper there to hold the three column and provide some structure to the page. It is not really necessary but allows me the option to add extra styling to that section and to be able to target that section only with the css.
However, it does have another (safety-net) use and that would be if you had floated elements in the header or at least above the columns then your first floated column may snag on the float above and not move to the far left and thus push all other floats out of kilter.
When I want to be sure that a sequence of floats start on the next line I wrap them all in a container and set that container to clear:both and then I know there will be no snagging above if someone later changes the code in the header.
You may think that you could just set the first float to clear:both but that would only make the first float not snag but the subsequent floats would still snag. You can’t set all floats to clear both because then they would clear each other and be just one big long column.
I like pages ot have structure and I would have a header section for logo and navigation and banners etc.
Then a main section which would contain the columns and content and sidebars. lastly followed by a footer section. This adds structure to the page and allows you to target these separate sections via their parent id or class.
For example you may want the text in all three columns to be font-size:120% and if you didn’t have a wrapper around all three columns you would need to set that size three times. However with a wrapper around the columns you could just say .mainsection p{font-size:120%}
So, in essence your are correct that we don’t add divs where none are needed but at the same time we try to keep a usable structure that makes maintenance easier.
Yeah, I understand your use of the extra DIV now.
They are absolutely placed on the screen
I think you may be thinking about one of these demos. The column colours are placed with the “left” position to match the floated columns positions. The left position is needed for each column because we are placing them inside the all encompassing parent container. Therefore we have to change the position of the overlay to match the position of the floated columns. We use the parent container for this (and not the column itself) because the parent container is the only element that will be as tall as the tallest column because all the columns are inside it. That’s the basis of the technique.
This is hard to do online…
My code which you blessed goes like this…
<body>
<div id="wrapperMinusFooter">
<div id="header"></div>
<div id="col1">COL1</div>
<div id="col2"></div>
<div id="col3">COL3</div>
<div id="one"></div>
<div id="three"></div>
</div>
<div id="footer">FOOTER</div>
</body>
/* CREATE BACKGROUND COLOR FOR COLUMNS */
#one{
clear: both;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 150px;
background: yellow;
}
#three{
clear: both;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
background: #D685AD;
}
The other code I am referring to goes like this…
<body>
<div id="wrapper">
<div id="header"></div>
<div id="outer">
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div class="col one"></div>
<div class="col two"></div>
<div class="col three"></div>
</div>
<div id="footer"></div>
</div>
</body>
.col {
width:200px;
position:absolute;
z-index:0;
left:10px;
bottom:0;
border:1px solid #000;
border-top:none;
}
.one {background:red;}
.two {
background:#FF6600;
left:222px;
width:334px;
}
.three {
background:#CC3399;
left:568px;
[B]Now why is it done the way it is done in the second set of code above?
Why all those Left: xxx when the first example doesn’t need them?
[/B]
I’m lost…
TomTees
Paul,
Okay, I was just being sure.
Your reasoning makes sense. (I am all for “compartmentalization”!)
I would be more interested in hearing a response on Question #2 above, though.
TomTees
Oh, and just to confuse matters more… here’s my approach.
http://www.cutcodedown.com/for_others/tomtees
Which muddies the waters by adding semi-fluid capability to the layout, just to show how complex you can get. This approach is similar to Paul’s but a little different in the placement logic. It uses a second inner wrapping DIV like Paul’s, but puts the faux-column div’s BEFORE the content so source order handles our depth sorting better (especially in legacy IE)… and they’re nested so that you only need one ID to target all of them. I use three so you can set the center background separately if so desired and so you can more readily set all three appearances in the same ‘spot’.
The big trick on mine is to set #fauxColumns…
<div id=“fauxColumns”><div><div></div></div></div>
… to position:absolute; bottom:0; and then on the inner div just use margins and paddings to reveal the parent and constrain the innermost one (center column). Setting a uber-tall height (9999em) on the innermost one makes them all that tall, but because #fauxColumns is absolute positioned at the bottom anything that goes off the top is automagically cut off.
If you browse through the CSS I tried to document anything and everything you might have questions as to what/why/how.
Said code having the bonus of working all the way back to IE 5.01 with no bugs mostly through following several simple rules I have for writing compatible code. It also puts the content column first in the source order which is good if you have less relevant data in the sidebar – which one can usually assume is the case if you have a menu across the top.
Looks good Jason and well documented.