CSS Footer

[richkoi]

I want to create a page where the footer is always at the bottom at the page and the header always at the top.

I faked it with this site, but it isn't quite what I want to do. I would rather the footer went all the way to the bottom rather than all the wasted space.

Thanks,

Rich

[bj]

http://css-discuss.incutio.com/?page=FooterInfo

[ADAM Web Design]

Which site?

[richkoi]

This site:

http://www.richkoi.com

Rich

[ADAM Web Design]

I don't see what the problem is. The footer is at the bottom of every page and the header is at the top. Unless you mean you want the footer to be at the bottom without any scrolling necessary.

In that case, the only way I could see to accomplish something like that would be with a scrolling DIV in the middle with the height property calculated by a Javascript.

[richkoi]

Ok, here's a better example:

http://www.richknitter.com/

On pages with little text (http://www.richknitter.com/rich.php?page=copyright.htm) I would like the footer to be at the bottom of the screen, even if there is a lot of white space inbetween.

Rich

[johngroup]

CSS from Paul at Sitepoint:
<style type="text/css">
/* commented backslash hack \*/ html, body{height:100%;} /* end hack */ html,body {margin:0;padding:0} #outer{ min-height:100%; margin-bottom:-50px; height:auto; } * html #outer{height:100%;} #footer { width:100%; clear:both; height:50px; background-color: #FF8080; color: #000000; } #clearfooter{clear:both;height:50px;} div>p {margin:0} #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper thanks to Tim Connor*/ * html #minHeight{margin-bottom:-50px;}
</style>

HTML:
<div id="minHeight"></div>
<!—Safari hack -->
<div id="outer">


content goes here</p>
<div id="clearfooter"></div>
</div>
<div id="footer">Footer -</div>

[richkoi]

Here's another resource I found that does what I want... except I hate CSS hacks. I wish there was a pure, cross browser compatible solution for this problem.

http://scott.sauyet.name/CSS/Demo/FooterDemo1.html

Rich

[brian.mark]

You could always use tables if you don't like the css hacks. Just set the height to 100% and it works in IE and FF just fine. I still do that a lot since I don't do much CSS stuff. My PPC doesn't seem to ever like it. ;-)

Brian.