Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Center Text in CSS

Status
Not open for further replies.

Dashsa

Programmer
Aug 7, 2006
110
US
I want to center the footer txt but I need it stay about 20 px of the bottom of the page(Its the phone number of the company) and I need it to be static on each page....

Here is the CSS i curently have for it:

Code:
#FooterTxt{
text-align:center;
margin-left:auto;
margin-right:auto;
width:30em;
position:relative;
top:290px;
}

This works well BUT i need it to be a static distance form the bottom of the page and currently this is not the case.
 
By the bottom of the page, I suppose you mean the bottom of the viewport (the browser window). What happens if the content (or the client's browser window) is smaller than the viewport? Alternatively, what if the client has a really big screen and their footer then resides so far down the page they cannot see it?

If you still want to do that, you would need to use absolute positioning on the footer and specify bottom value (20px in your case, I guess). However, I would advise against that and opt for a footer that follows content, wherever content may reach. This might be half way on the browser window or three pages down. In this case you would simply make sure that your footer is following the content (normal document flow) and add 20px margin top to the footer (to achieve a little gap between content and footer).

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
If you're interested in keeping your footer pegged to the bottom of the viewport when your content renders shorter than the fold (i.e., height of a single screen of your page before scrolling), you can try out this technique called footerStickAlt:


Just position your text within the footer element however you'd prefer. If you need a 20px margin then you're free to set that within the footer element you specify.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top