PDA

Click to See Complete Forum and Search --> : Footer <div>s resting on the bottom.

cscooper
08-27-2005, 08:25 PM
Can anyone help me get #footer to sit on the bottom of the page (mostly concerned with IE for now, but will eventually need a solution for standards-compliant browsers, too).

I've tried:

... position: absolute; bottom: 0; ...

This works OK, for short pages (as seen in the code below), but for longer-length content, the #footer is "stuck" at the bottom of the first fold and not at the bottom of all content.

I've also tried:

... position: relative; bottom: 0; ...

But this only works for longer content pages. Short pages (such as in the example below) have the #footer immediately following the two paragraphs.

To see what I mean, take the code below and add your solution to the CSS, then try adding more or less paragraphs within the #main division.

I just want a solution that will never show browser whitespace at all after the final #footer division.

Here's an example page:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bottom Feeder</title>
<style type="text/css">
<!--
* {margin:0;
padding:0;
font-family: georgia;}

div#header { width: 100%;
background: #223;
border-width: 0 0 5px 0;
border: solid #667;}

div#header h1{ color: #fff;
margin-top: 25px;
margin-left: 25px;}

div#sidelinks{ float: left;
margin: 25px 25px 0 10px;
background: #fdf9f1;
border: #d91 solid 3px;}

div#sidelinks * { font-family: "Trebuchet MS";}

div#sidelinks ul{ margin: 10px;}

div#sidelinks ul li{ list-style: none;}

div#sidelinks ul li a:link { text-decoration:none;
color:#223;}
div#sidelinks ul li a:visited { text-decoration:none;
color:#223;}
div#sidelinks ul li a:hover { text-decoration:underline;
color:#667;}

div#main{ width: 600px;
margin: 25px 0 0 0px;}

h1, h2 { font-family: "Trebuchet MS";
width: 700px;}

h2{ color:#c80;}

p{ margin-bottom: 25px}

.super{ font-size:7pt;
color: #888;}

div#footer{ bottom: 0;
width: 100%;
background: #223;
border-width: 5px 0 0 0;
border: solid #667;
height: 40px;}

div#footer p{ color: #fff;
font-size: smaller;
font-family: "Trebuchet MS";
margin-left:25px}


-->
</style>
</head>
<body>
<div id="content">
<div id="header">
<h1>Joe's Bottom Feeder</h1>
</div>
<div id="sidelinks">
<ul>
<li><a href="http://www.amazon.com/">Amazon Books</a></li>
<li><a href="http://www.simplebits.com/">Simple Bits</a></li>
<li><a href="http://www.zewg.com/">Zewg</a></li>
<li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
<li><a href="http://www.forsalebyowner.com/">For Sale By Owner</a></li>
<li><a href="http://www.cssvault.com/">CSS Vault</a></li>
</ul>
</div>
<div id="main">
<h2>Welcome</h2>
<p>You're always welcome at Joe's Bottom Feeder. The site that tries to make sense of CSS positioning.
Specifically we attempt to tackle tricky footer divs &mdash; you know, the kind that should live on
the bottom of your page.</p>
<h2>80's Flashback</h2>
<p>I'm not a fan of Spandex<span class="super">&reg;</span> shorts. The shrinkage just doesn't
adequately cover the wearer. Like a good pair of shorts, this page should never shrink smaller
than 100% of the screen height. And should always grow to allow more content.</p>
</div>
<div id="footer">
<p>Copyright &copy;2005, BottomsUp.</p>
</div>
</div>
</body>
</html>
The Little Guy
08-27-2005, 11:53 PM
It looks like this: div#footer

Make it look like this: #footer

You don't need the div
cscooper
08-28-2005, 12:10 AM
OK. Unrelated to my question. But thank you for your opinion. :o

Still looking for an answer to my original question, why the footer division will not push to the bottom of the page, or content, whichever is longer. See simplebits.com. Dan's site has the same type of footer that pushes to the bottom of content, but if the content is less than the full height of the screen, I think his code footer would also rise up the page (end of content, not end of viewable page).

Anyone? Bueller?
The Little Guy
08-28-2005, 12:25 AM
Are you asking for a code that will make a link automatically scroll to the bottom of the page when you click on it?
cscooper
08-28-2005, 08:00 PM
No. If you paste my code into a text editor and then open it in IE or Firefox, you'll see the blue footer section at the bottom of the two paragraphs. My question is: Why is this footer not at the absolute bottom of the page? Please read my original post to know what I've already tried to make this work and how it hasn't worked thus far.
The Little Guy
08-28-2005, 09:35 PM
Try this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Bottom Feeder</title>
<style type="text/css">
<!--
* {margin:0;
padding:0;
font-family: georgia;}

div#header {
top: 0px;
width: 100%;
background: #223;
border-width: 0 0 5px 0;
border: solid #667;}

div#header h1{ color: #fff;
margin-top: 25px;
margin-left: 25px;}

div#sidelinks{ float: left;
margin: 25px 25px 0 10px;
background: #fdf9f1;
border: #d91 solid 3px;}

div#sidelinks * { font-family: "Trebuchet MS";}

div#sidelinks ul{ margin: 10px;}

div#sidelinks ul li{ list-style: none;}

div#sidelinks ul li a:link { text-decoration:none;
color:#223;}
div#sidelinks ul li a:visited { text-decoration:none;
color:#223;}
div#sidelinks ul li a:hover { text-decoration:underline;
color:#667;}

div#main{ width: 600px;
margin: 25px 0 0 0px;}

h1, h2 { font-family: "Trebuchet MS";
width: 700px;}

h2{ color:#c80;}

p{ margin-bottom: 25px}

.super{ font-size:7pt;
color: #888;}

#footer{
position: absolute;
top: 500px;
width: 100%;
background: #223;
border-width: 5px 0 0 0;
border: solid #667;
height: 40px;}

div#footer p{ color: #fff;
font-size: smaller;
font-family: "Trebuchet MS";
margin-left:25px}


-->
</style>
</head>
<body>
<div id="content">
<div id="header">
<h1>Joe's Bottom Feeder</h1>
</div>
<div id="sidelinks">
<ul>
<li><a href="http://www.amazon.com/">Amazon Books</a></li>
<li><a href="http://www.simplebits.com/">Simple Bits</a></li>
<li><a href="http://www.zewg.com/">Zewg</a></li>
<li><a href="http://www.csszengarden.com/">CSS Zen Garden</a></li>
<li><a href="http://www.forsalebyowner.com/">For Sale By Owner</a></li>
<li><a href="http://www.cssvault.com/">CSS Vault</a></li>
</ul>
</div>
<div id="main">
<h2>Welcome</h2>
<p>You're always welcome at Joe's Bottom Feeder. The site that tries to make sense of CSS positioning.
Specifically we attempt to tackle tricky footer divs &mdash; you know, the kind that should live on
the bottom of your page.</p>
<h2>80's Flashback</h2>
<p>I'm not a fan of Spandex<span class="super">&reg;</span> shorts. The shrinkage just doesn't
adequately cover the wearer. Like a good pair of shorts, this page should never shrink smaller
than 100% of the screen height. And should always grow to allow more content.</p>
</div>
</div>
<div id="footer">
<p>Copyright &copy;2005, BottomsUp.</p>

</div>
</body>
</html>
bathurst_guy
08-28-2005, 10:11 PM
give the footer a clear:both;
and remove absolute positioning
mikepurvis
08-29-2005, 06:37 AM
Cameron Adams just wrote up a solution for this problem, although the responses in the comments aren't ecstatic:

http://www.themaninblue.com/writing/perspective/2005/08/29/

(The demos work fine for me...)
kiwibrit
08-29-2005, 06:59 AM
bathurst_guy's solution is what I use. Successfully.
bathurst_guy
08-29-2005, 07:01 AM
lol your welcome :) i accept paypal donations :p
ray326
08-29-2005, 01:11 PM
Does that really satisfy the "bottom of window or bottom of content if longer" requirement?
cscooper
08-29-2005, 05:12 PM
Thanks, LittleGuy, but "absoluting" the footer only works with "short content". If you add more content to the page, the solution breaks.

Bathurst, I appreciate your input, too. This is the code I had originally started with, thanks to taking a peek behind Dan Cederholm's http://www.SimpleBits.com. However this solution is also one-sided. It only works for "long content".

And the winner is...

...Mikepurvis! Thanks SO much for understanding what I was asking and taking the time to share the <a href="http://www.themaninblue.com/writing...ive/2005/08/29/">Man in Blue article</a> with me. This solution makes a lot of sense — even before I typed it all into my code. (just be sure to read and re-read your code) I sat frustrated for an entire hour wondering why it wasn't working — it sounded so logical. Well after the 14th re-read of my code, I finally saw I was missing a % sign.)

Anyway, it WORKS!!! In BOTH IE and Firefox. Two-for-one! BAM!