Sticky Footer

Another layout of the "Holy Grail" ilk. This one is a little more interesting with a footer that stays at the bottom of the screen - unless the content is longer!

So, I’ve been trying for a while to figure out the whole “Holy Grail” (as it’s been called) of layouts: the 3 column layout with header and “sticky footer” that works cross-browser. A List Apart has one, but it relies on having a huge bottom padding, and then reversing that with a huge negative margin. Me, I’m chick who likes to use negative margins as sparingly as possible – meaning only when I have to, and preferably nothing in the quadruple (or larger) digits.

There’s several other ones I’d found – but most of them relied on similar fixes – or javascript to determine the browser window’s height (for IE purposes). For me, javascript is a no-no. The point of CSS is so people can still see what you’re doing – whether javascript is turned off or not. Then there were ones that were fixed width and centered, and didn’t have sidebars. Neat idea – but I needed more.

Then I came across this site the other day, and the guy had a 3-column layout. It was nice, and exactly what I was looking for – however it had a lot of hacks and (what seemed to me) unnecessary extra code and CSS in there. So I played with it…

…and came up with the following.

What I wanted needed to fit these specs:

  1. Must be 100% fluid, horizontally and vertically.
  2. Must be 3 columns – 2 sidebars (fixed width) with an expanding center section which contains the content.
  3. Sidebar colors must come all the way down to the footer.
  4. Must have a header (of course).
  5. The tricky part: must have a footer which remains at the bottom of the viewable area of the screen – UNLESS the content of one of the 3 columns is long enough to push it down.

Most of this was easily achievable – but the footer was what was getting me. I could get a footer at the bottom of the screen, no problem. But if the content was longer than the viewable area, I would end up with a footer smack in the middle of my content. It would not push down, no matter what I did.

Until now :)

So, again, based on this site’s layout, we now have a winner! (you can see the actual example that the below code outputs here: Sticky Footer Example)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="main.css" rel="stylesheet" type="text/css" />

<!--[if lte IE 6]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>

<body>

<div id="header">
Header Here
</div> <!-- closing #header" -->

<div id="outer">

<div id="clearheader">
<!-- used to make room for the #header -->
</div>

<div id="left">
<p>left sidebar here</p>
<p>left sidebar here</p>
<p>left sidebar here</p>
<p>left sidebar here</p>
<p>left sidebar here</p>
<p>left sidebar here</p>
<p>left sidebar here</p>
</div> <!-- closing #left -->

<div id="middle">
<p>Guzzled snakeoil, tar, than wuz had has heffer catfish feud. Skedaddled, co-op outhouse mule y'all showed far. Broke highway cold cooked feud driveway mush hee-haw old. </p>

<p>Gal took been has moonshine where neighbor's farm. Throwed dogs hold neighbor's poker burnin', gimmie. Buy give spell what jail plug-nickel java cain't no jig havin' cain't go. Down had fetched, caught hollarin' havin' pigs in. Hogs caboose stole dumb if, gonna dogs penny grandpa jail fussin' cow outhouse work. Kinfolk shed mashed, smokin' shack nothin' whiskey boobtube pick-up, hee-haw hospitality fancy. Plumb shiney commencin' pickled drunk fixin' water, skedaddled gospel, jail work rottgut.</p>

<p>Wrestlin' cowpoke penny git fried where hold than hospitality pickled gonna. Fightin' bankrupt road rottgut no heapin' bankrupt wash rodeo, hospitality. Cow hobo ails firewood tarnation clan creosote his squalor me mobilehome, bible, overalls. Spell hospitality, cabin drive what pot fat fence poor hayseed sam-hell hairy firewood, liniment what. Lyin', backwoods liar, hillbilly buckshot coonskin beat jiggly fit. </p>
</div> <!-- closing #middle -->

<div id="right">
<p>right sidebar here</p>
<p>right sidebar here</p>
<p>right sidebar here</p>
<p>right sidebar here</p>
<p>right sidebar here</p>
<p>right sidebar here</p>
<p>right sidebar here</p>
</div> <!-- closing #right -->

<div id="clearfooter">
<!-- used to make room for the #footer -->
</div>

</div> <!-- closing #outer -->

<div id="footer">
Footer Here
</div> <!-- closing #footer -->

</body>
</html>

main.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
* {
margin:0;
padding:0;
border:none;
z-index:0;
}

html, body {
height:100%;
}

body {
font-family:arial, sans-serif;
color:#000;
font-size:82%;
background:#CCC;
}

#header{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
line-height:100px;
background:#000;
color: #FFF;
font-weight:bold;
text-align:center;
}

#clearheader {
height:100px;
}

#outer{
min-height:100%;
margin-left:200px;
margin-right:200px;
margin-bottom:-100px;
background:#FFF;
}

#left, #right {
position:relative;
width:200px;
text-align:center;
}

#left {
float:left;
z-index:100;
margin-left:-199px;
left:-1px;
}

#right {
float:right;
margin-right:-199px;
right:-1px;
}

#middle {
width:100%;
float:left;
position:relative;
z-index:1;
margin:0 -1px;
}

p {
padding:15px 15px 0 15px;
}

#clearfooter {
clear:both;
height:115px;
}

#footer {
width:100%;
clear:both;
height:100px;
line-height:100px;
background-color:#000;
color: #FFF;
font-weight:bold;
text-align:center;
position:relative;
}

ie.css

1
2
3
4
5
6
7
8
9
10
11
#outer {
height:100%;
}

#left {
margin-right:-3px;
}

#right {
margin-left:-3px;
}

And there it is. Now, I’ve only tested this on Windows XP: Firefox 1.0, IE6, IE5.5, IE5.1, Opera 7, Opera8 and Netscape 7. My Mac is unavailable at the moment, so I haven’t had a chance to check it on my three browsers there – but as soon as I get a chance to, I’ll be updating this post. But in the meantime, enjoy it.

Update: 5/12/2006: I tested it on my Mac. Safari 2.0, Firefox 1.0 and IE5.2 are good to go!

Update: 9/18/2007: IE 7 apparently was broken with the original code. I’ve edited the above code to change <!–[if IE]> to <!–[if lte IE 6]>, since IE 7 renders it just fine out of the box. Now the conditional is only used for IE6 and lower, while IE7 just uses the regular stylesheet and all is well.

Comments

  • Leo

    Just as neat, semantic and fluid as it needs to be! The only thing I’cant figure out is how to prevent middle column from total collapse (when resizing browser window). (min-width: 200px;) seems not to help when applying to #middle…

    April 23, 2012 at 6:16 am Reply
    • Shelly

      Hi Leo,

      I don’t believe I’ve ever had that issue – I just can’t imagine someone collapsing the browser window so much that the center column disappears. I suppose it’s possible though, since it’s set to have the center column fluid while the sidebars are fixed width. You could probably get around this by setting the margins for the center to percentages (with the sidebars to match) and setting a min fixed-width px for the middle? That’s just off the top of my head, since I haven’t worked with this layout in some time. I’d have to revisit this and see what I can come up with :) But hopefully that helps a bit!

      April 23, 2012 at 10:38 am Reply
    • felicopter

      Hi!

      Simply add min-width to #outer.

      Best, felicopter.

      October 21, 2013 at 3:35 pm Reply
  • Have your say: