How do I keep footer at the bottom of the page?

Question

I want my footer to stay at the very bottom of the page, not at the bottom of my screen or a sticky footer that follows me everywhere, I want it to stay at the end!!

#footer ul {
width: 100%;
height: 30px;
z-index: 10;
position: absolute;
bottom: 0px;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
font-size: .65em;
border-top: 1px solid rgba(0,0,0,0.4);
}

my footer is inside this container

#container {
font-family: 'Syncopate', sans-serif;
width: 100%;
height: auto;
height: 100%;
min-height: 100%;
margin: 0 auto;
left: 0;
}

HTML Code

<html>
<head>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Syncopate' rel='stylesheet' type='text/css'>
</head>
<body>

    <div id="container">
        <div id="header">
                <span class="icon"><img src="img/safety_icon5.png"></span>
                <span class="logo">Dsn de Mexico</span><br>
                <span class ="logosub">Seguridad Industrial</span>
            <div id="nav">
                <ul>
                    <li><a href="#">Contactenos</a></li>
                </ul>
            </div>
        </div>

        <div id="content">
            <span class="products_title">Productos</span>
            <span class="fill_h">hide</span>
            <div class="products_grid"><a href="#"></a>
                <h3>Lentes.</h3>
                <img src="img/gafas seguridad.jpg" class="image">
                <p>
                    Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.
                </p>
            </div>
            <div class="products_grid">
                <h3>Respiradores.</h3>
                <img src="img/respirador.jpg" class="image">
                <p>
                    Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.
                </p>
            </div>
            <div class="products_grid">
                <h3>Guantes.</h3>
                <img src="img/guantes.jpg" class="image">
                <p id="widget">
                    Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.
                </p>
            </div>

        </div>
        <div id="extend_content">
            <img src="img/proveedores.jpg" alt="Nuestros Proveedores">
        </div>

        <div id="footer">
            <ul>
                <li><a href="#">Guantes</a></li>
                <li><a href="#">Overoles</a></li>
                <li><a href="#">Tapones</a></li>
                <li><a href="#">Lentes</a></li>
                <li><a href="#">Respiradores</a></li>
                <li><a href="#">Miscelaneos</a></li>
                <li><a href="#">Cuarto Limpio</a></li>
                <li><a href="#">Prod. Aluminizados</a></li>
            </ul>
        </div>



    </div>



</body>
<html>

Have you seen http://stackoverflow.com/questions/14179481/how-to-stick-footer-to-bottom-with-a-little-twist?lq=1 ? — openrijal, Apr 30 '13 at 06:52
If you want it at the bottom of your page you don't need to use `absolute` or `fixed` position. Just put at the end of your ``. Also, the style you're showing us is about a `
` element, not the whole footer. — ulentini, Apr 30 '13 at 06:53
There are tutorials for this all over the internet! Did you do any research??? http://css-tricks.com/snippets/css/sticky-footer/ and http://www.cssstickyfooter.com/ to name a couple! — Ben Carey, Apr 30 '13 at 06:54
@Uby Just to correct you, the UL might actually be the whole footer, depending on his HTML (not that it should be!). And by placing something at the end of your body tag does not necessarily place it at the bottom of the screen! — Ben Carey, Apr 30 '13 at 06:56
I did look at those questions, but they are not working. for some reason, when I remove absolute my footer moves to the very top of the page — Manuel Medina, Apr 30 '13 at 06:57
@ManuelMedina You have only posted your CSS, please post your HTML structure! — Ben Carey, Apr 30 '13 at 07:01
Guys, the OP really seems to be asking how to let the footer find its natural position in the document flow and _not_ stick to the bottom of the page. It would have been better worded as "bottom of the content" than "bottom of the page". — ralph.m, Apr 30 '13 at 07:04
Manuel, I'm guessing that you are using a pre-made template that is geared towards having the footer stuck at the bottom of the page. (It looks like it's using a poor technique for a sticky footer—see @Rohit's post for a better approach). If you don't want a sticky footer, it may be a bit of work to clean out all the styles that are in place to try to make it happen (but again, we need to see the page in question). This is why I prefer to start from a blank canvas when coding pages. — ralph.m, Apr 30 '13 at 07:11
No, that's all my code, it's just that this is my first time building a website so I don't quite know what Im doing exactly. @ralph.m — Manuel Medina, Apr 30 '13 at 07:14

score 2 · Answer 1 · edited Apr 30 '13 at 06:52

2

Use a sticky footer

As shown here

Css

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

edited Apr 30 '13 at 06:52

Ben Carey

16,540
19
87
169

answered Apr 30 '13 at 06:50

Rohit Azad Malik

31,410
17
69
97

If you read the question carefully, it appears the the OP _doesn't_ want a sticky footer. Presumably the code has been supplied, and the OP doesn't understand what the absolute positioning is doing. – ralph.m Apr 30 '13 at 07:00
@ralph.m gotcha, my apologies! :-) – Ben Carey Apr 30 '13 at 07:02

score 1 · Answer 2 · answered Apr 30 '13 at 06:52

1

From the way you've worded your question, I'm presuming you don't want a sticky footer, so the following answer is based on that assumption.

Remove position: absolute and let the footer element follow the natural flow of the content. Setting an element to position: absolute takes it out of the flow of the document, which is usually not a good idea for major page elements. This should be all you need:

#footer ul {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
font-size: .65em;
border-top: 1px solid rgba(0,0,0,0.4);
}

If you do want a sticky footer, position: absolute is not a bulletproof way to achieve that anyway, so further help can be provided if that's what you need.

answered Apr 30 '13 at 06:52

ralph.m

13,468
3
23
30

I tried that but for some reason, it goes to the very top instead which is a very odd behavior? – Manuel Medina Apr 30 '13 at 06:54
@ManuelMedina It would help if you post your HTML. This answer will not put the footer at the bottom of the page! See Rohits answer to achieve what you want! – Ben Carey Apr 30 '13 at 06:57
OK, that means there are other problems with your page. Are other parts of the page set to `position: absolute`? As I mentioned, this is rarely a good way to do page layout, so the first step wold be to remove all of the positioning on the page. We can offer better answers if we see the actual page. Otherwise, we will be guessing, and perhaps wasting your time. :) – ralph.m Apr 30 '13 at 06:58
@ralph.m Even if the other elements were not positioned absolutely, your solution would not place the footer at the bottom of the page! The content must have a height of 100% to push the footer below the bottom, and then apply a negative margin to bring it back up over the wrapper – Ben Carey Apr 30 '13 at 07:00
@ralph.m +1 as this will work as long as other positioning is removed! – Ben Carey Apr 30 '13 at 07:03

How do I keep footer at the bottom of the page?

2 Answers2