CODEWITHSUNDEEP
htmlcss
user2613813
user2613813

Reputation: 1971

Fix footer at the bottom of page

I would like fix footer at the bottom of the page, I tried CSS

 #footer {
    position: absolute;
    botom: 0;
}`

HTML

<div class="row">

    <div style="width: 155px; float: right;">
        <a href="http://zazoo.com/privacy/">Privée </a> | <a href="http://zazoo.com/terms-of-service/"> Conditions </a>
    </div>
</div>
<footer>
    <hr>
    <p>
        zAZOO est un service de sTELLA SAS, 40, rue Raymond debré, 93450, St denis,<br /> France, RCS 510 752 645 NANTERRE
    </p>
</footer>

Upvotes: 0

Views: 290

Answers (4)

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9412

Your css needs minor edits. This is working.

 footer {
    position: absolute;
    bottom: 0;
}

http://jsfiddle.net/qVVWr/

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this without id you have use to footer html5 tag in this Demo

footer{
    position:fixed;
    bottom:0;
}

DEMO

OR

and with #footer you have use to below Demo.

DEMO

#footer{
    position:fixed;
    bottom:0;
}

Upvotes: 3

t00thy
t00thy

Reputation: 519

The way that Fags say is good, but notice, that the footer element is for browser to understand the content of your page, not to style it. So better is to use it like this:

HTML

<footer id="main-footer">
    <p>Some Text is here</p>
</footer>

CSS

#main-footer {
    position: fixed;
    bottom:0;
}

Second reason for giving an id or class to this element is, that if you use HTML5, you'll use more than one element on page.

Upvotes: 0

Peter Lang
Peter Lang

Reputation: 367

First correct the typos. Next, the footer isn't an ID, but the name of the element, so you have to use:

footer {
    position: absolute;
    bottom: 0;
}

Working example:

http://jsfiddle.net/kqJrf/

Upvotes: 0

Related Questions