-4

How do I keep the footer at the bottom of the page? Here is my code:

<footer> Copyright 2013 All rights reserved.

That's about it. Is there any CSS that I can use to bring down the footer to the bottom of the page because when I use the <footer> code it stays in the middle instead of the bottom.

1

3 Answers 3

10

You can just use CSS:

.footer {
    position:fixed;bottom:0;

    width:100%;
    display:block;
}
2
  • 2
    This will make the footer stick to the bottom of the browser window, visible at all times, overlapping other content if the page is longer. I think OP needs to clarify if they want that, of if this is only about the shorter pages that don't reach the fold.
    – bobsoap
    Apr 24, 2013 at 0:55
  • Ahhhh. Well if the OP wants something else, i'd use jquery waypoints (imakewebthings.com/jquery-waypoints) to listen to the position of the scroll point (or another element) and when the threshold is met, do the above.
    – jahrichie
    Apr 28, 2013 at 2:36
2

I use:

#footerbox {
height:125px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FF9966;
font: normal 13px verdana, sans-serif;

I would suggest setting the height to whatever you please, but I keep it bigger to have all of the info in it like legal stuff, contact info, etc. Then, for the copy right, I use

#copyright {
height:20px;width:55%;
background: #333;
position:absolute;
bottom:50px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
color:#FFFFFF;
font: normal 13px verdana, sans-serif;
border-top:2px solid #FF9966;
}

Hope this helps somewhat. You can also set the width to whatever you want, pixels or percent. It wouldn't be to hard to get it attached to the bottom, if that's what you want. To make the copyright overlap the larger footer, just use

.class{
clear:both;
}

at the top of your CSS, and then clear P tags in your HTML like so

<div id="copyright">
<p class="clear">&copy herp derp</p>
</div>
0

1) give the <body> a height of 100%

body { height:100%; }

2) Assuming a HTML structure like this:

<div id="container">
  some content
</div>
<footer>
  Copyright 2013 All rights reserved.
</footer>

, and assuming your <footer> is 40px in height, add this to #container:

#container { min-height:100%; padding-bottom:40px; margin-bottom:-40px; }

Not the answer you're looking for? Browse other questions tagged or ask your own question.