Footer isn't sticking to bottom though I have it coded

StackOverflow https://stackoverflow.com/questions/411228

  •  03-07-2019
  •  | 
  •  

Question

I removed the footer for the time being, site had to go online. So the link is gone as well.

As you can see (in FF2 as well as in IE7) the footer is at the bottom of the SCREEN, but not at the bottom of the page (content).

I have this in my code:

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

and this in the css:

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

Or, making a long story short: I followed the instructions given here.

Was it helpful?

Solution

Right, so with the #size inside the 100%, take the padding off the wrap and add the following to the #content

overflow:auto;
padding-bottom:30px;

then your link works for me in FF

OTHER TIPS

You did not follow your instructions carefully enough. The key to Matthew's layout

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

is that container has position:relative while footer has position:absolute. That places one inside another. Notice that container has a space reserved for footer by reserving padding-bottom the size of footer. So, the layout only works when footer height is fixed.

Absolutely positioned with botttom:0 element will put itself at the bottom of closest relatively positioned parent. If none are there, viewport is used instead, and that is what's happening in your layout.

Your footer div is not a child of your wrap div.

How about this one?

Move the padding from the bottom of the body to the bottom of the #wrap. Your footer is always 30px from the bottom of the "page" because of that padding. By putting it on the #wrap you'll prevent the contents of #wrap from going behind your footer.

    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

This worked for me.

IMO, the IE star hack causes the problem. Try changing the IE hacks with :

*html #wrap {
    ...
}

There is a pretty good technic with demo in this site: http://www.themaninblue.com/experiment/footerStickAlt/

There must be something else to this matter, every method described above all work on different sites, just not on mine.

This is my page source, non-relevant things are stripped (content and stuff):

<body>
    <div id="size"> javascript textsize modifier</div>
    <div id="wrap">

        <div id="top"> logoimage
            <div id="menu">
                <div id="menuwrapper">
                    <ul id="primary-nav">
                        <li> Homelink </li>
                        <li class="menuactive menuparent" class="over"> Link 2
                            <ul>
                                <li> Sublink 1 </li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                        <li class="menuparent" class="over"> Active Link 3
                            <ul>
                                <li> Sublink 1</li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                    </ul>
                </div> <!-- end menuwrapper //-->
            </div> <!-- end menu //-->
        </div> <!-- end top //-->

        <div id="content">
            <div id="newssnippet"></div>
            <div id="roundedright"> <!-- rounded corners //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="right">Random main content</div>
                <!-- 7 divs to create rounded corners //-->
            </div> <!-- end rounded corners //-->

            <div id="logo">Another logo</div>

            <div id="roundedleft"> <!-- rounded corners again //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="left">News content</div> 
                <!-- 7 divs to create rounded corners //-->
            </div>  <!-- end rounded corners //-->
        </div> <!-- end content //-->

        <div id="footer"></div>

    </div><!-- end wrap //-->
</body>

Clearly, I am following the prescribed layout from the link in the opening post.

Then in the CSS, I have:

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

That should be every relevant bit...

What am I missing?

For the record: the footer is sticking to the bottom of the oage in the right position if the content is less than 100% high. So, if it doesn't fill the screen.
The footer is somewhere halfway the content if the content is more then 100% of the page, so when I have to scroll to see everyting.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top