sticky footer?

[ajay53213]

I’ve been a long time lurker here and have searched for my solution to no luck!
I’ve literally been working or trying to fix this all day… Any help would be greatly appreciated!!!
I am trying to make my footer stay at bottom of browser window regardless of how much content is above it. It seems like i’ve tried everything…. I dunno?

CSS CODE
#footermainPan{background:url(images/footerbg.gif) 0 0 repeat-x #F4F4F4; color:#212121; position:relative; margin:0 auto; height:65px; clear:both;}

#footerPan{width:689px; position:relative; margin:0 auto; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; padding:15px 0 0;}

HTML CODE
<div id="footermainPan">
<div id="footerPan">
<ul>
<li><a href="#">home</a>| </li>
<li><a href="#">about</a>| </li>
<li><a href="#">engage</a>| </li>
<li><a href="#">events</a> | </li>
<li><a href="#">photos</a> |</li>
<li><a href="#">contact</a></li>
</ul>
<p align="center" class="copyright">©copyright 2010 | all rights reserved</p>
</div>
</div>

[Nipperkin]

I had this problem recently: a website with a lot of content on a some pages, next to none on others. I tried every solution I could find on-line. I could get the footer to stick to the bottom of the screen, no problem, but on pages with a lot of content that meant it appeared in the middle of the page (!). Furthermore, since these solutions used absolute positioning, on those pages the content scrolled but the footer remained fixed. Hardly what I was hoping to do.

In the end I found a solution that worked: on those pages with just a bit of content I added the "sticky CSS code" to the footer div in the HTML of the page, like this:

Code:

and on those pages, the footer appears at the bottom of the screen. On all other pages it appears on the bottom of the page. You can check it out here: http://www.mindmadebooks.com/.

[Author]

Posts