how to center a footer div on a webpage

Question

Hi, I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?

This is my html mark up:

<div id="footer">
   <p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div> 

Which css property can I use to solve this problem? A sample would be appreciated. Thanks.

Answer 1

#footer{
text-align:center
}

Answer 2

Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto, margin-right: auto.

And if you want a gap above it, give it a top margin.

Answer 3

Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:

#footer {
    margin-left:auto;
    margin-right:auto;
    margin-top:2em;
}

I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.

The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:

#footer {
    margin: 2px auto 0 auto;
}

(sequence is top, right, bottom, left)

hope that helps.

Answer 4

You can center the text with the following CSS

#footer {
  margin: 0 auto;
}

If you want more space on top add

margin-top: 2em;

after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.

---

More empty vertical spacing above the footer can also be made using

padding-top: 2em;

The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.

Answer 5

I solved it with this:

#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px; 
left: 0px; 
text-align: center; 
}