Center footer at bottom of page

[peranha]

Here is the code that I have, but it puts the footer at the left side of the page

 

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

 

I change the position to center, and it sets it to the middle of the page.

 

Can you do position: absolute, center;

[chwebdesigns]

is there just text in the footer with no background-color??

[peranha]

Yes, I didnt put color in it as of right now, so it is just text.  the page is footer.php, so it is another whole page, is that what is causing it.

[eddierosenthal]

here is code from one of several types of footers

div#footer {

padding: 10px;;

text-align: center;

background-color: #fcfaff;

color: #10009f;

border-top: double #860920 medium;

height: 25px;

}

so you wrap your text in

<div id="footer">

 

</div>

 

[jerry_sidower]

Without a link to the page in question I can't be sure this is what you're really looking for, but give this a try:

 

Try placing the footer in a div with an id of "footer" like eddierosenthal suggested, but set the div to have an absolute width. Set the left and right margins to "auto" to center the div.

 

The problem is your footer div has absolute positioning, which overrides the margins and automatically pushes the footer to the left.

 

To fix this, enclose the "footer" div in another div with enclose the "footer" div with an id of "footerwrapper". Give this div the absolute positioning instead.

 

<div id="footerwrapper">
  <div id="footer">
    <p>FOOTER CONTENT GOES HERE</p>
  </div>
</div>

 

/* CSS DOCUMENT */

div#footerwrapper {
position: absolute;
bottom: 0;
width: 99%;
}

div#footer {
width: 700px;
margin: 0 auto;
text-align: center;
}

 

This was tested in Firefox 2.0.0.12 and IE7, and works in both. The CSS code passes W3 validation.

 

The width for the "footerwrapper" div is set to "99%" to prevent the horizontal scroll bar from appearing. There's probably a better fix for this but it's beyond my knowledge.

 

 

Cheers,

Jerry Sidower