1

Possible Duplicate:
How do you get the footer to stay at the bottom of a Web page?

I have this page and if you log in with

username: john password: tester

you will see the footer is not sticking to the bottom...any ideas on how to do this...i was thinking of using a min-height on the middle container but that doesnt work for large monitors unless i make it very high...any ideas..

here is my html

<body class="index_projects en production controller_projects">
    <div class="shell">
        <div id="header"></div>
        <div id="container" class="container"></div>
    </div>
    <div id="footer-wrap"></div>
</body>

any idea what i maybe doing wrong

Community
  • 1
  • 1
Matt Elhotiby
  • 43,028
  • 85
  • 218
  • 321

4 Answers4

2

You may want to take a look at this post Get down! How to keep footers down

scartag
  • 17,548
  • 3
  • 48
  • 52
0

Put this in your css:

#footer-wrap
{
    position: fixed;
    bottom: 0;
    height: 75px;
    z-index: 1;
    zoom: 1;
}

This is how I did it for a project of mine. As far as I remember "z-index: 1" is there so that the footer would pass over other page elements in case the browser window would be very small, and "zoom: 1" is to fix something with IE. You could also try without these styles. Adjust the height to your needs.

Jean-François Beauchamp
  • 5,485
  • 8
  • 43
  • 77
0

You can fix it with css :

#footer {
    text-align:center;
    width: 100%;
    position: fixed;//or absolute if you want it above the contents
    bottom: 0px;
}

And in your HTML page :

<div id="footer">
  <div id="footer-wrap">...</div>
</div>
Valky
  • 1,856
  • 3
  • 20
  • 38
0

This blog post from is also worth mentioning:

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

devdigital
  • 34,151
  • 9
  • 98
  • 120