Any suggestions on the best way to create a simple footer that sticks at the bottom of each webpage on your site?

 

I want to have some items in white text evenly spaced out along the bottom with a blue background (around 20px in height).

 

At present I'm using a table and although it looks OK I'm having a few issues spacing cells out whilst keeping a thin blue border background (text moves down and out of the background colour if I adjust the spacing?). Also, i feel I should try avoiding tables for layout and stick to CSS.

 

Here is my CSS which I suspect could be improved:

 

#footer {

position:relative;

margin-left:0px;

margin-right:0px;

margin-top:90px;

margin-bottom:10px;

height:20px;

width:100%;

clear:both;

text-align:center;

list-style:none;

background-color: #000099;

 

The HTML:

 

<div id="footer">

<table cellspacing="50"; cellpadding="0"; />

<tr>

<td><a href="about.htm"><font color="white">About us</font></a></td>

<td><a href="terms.htm"><font color="white">Terms</a></font></td>

<td><a href="member.htm"><font color="white">Member</a></font></td>

<td><a href="faq.htm"><font color="white">FAQ</a></font></td>

<td><a href="contact-us.htm"><font color="white">Contact Us</a></font></td>

<td><a href="privacy-policy.htm"><font color="white">Privacy Policy</a></font></td></tr>

</table>

</div><!--end of footer div-->

 

 

Any suggestions on how best to create a simple footer and what in my CSS needs removing/adding/improving?

 

Edit: yes I know the font color declaration is probably outdated but its the only way I can get it to work easily.

 

Webtastic!

Edited July 7, 201115 yr by Webtastic

There are two types of sticky footer,

one that uses position: fixed and sticks to the bottom all the time and content flows behind it, shown here

http://www.wickham43.net/headerfooterfix.php

IE6 doesn't process this and not many people use this method.

 

The other which is very popular sticks to the bottom when there isn't much page content, but stays below the content and below the window bottom if the content uses all the window height and you scroll to see the footer. Both these tutorials are the same method with slightly different code:-

http://ryanfait.com/sticky-footer/

http://www.cssstickyfooter.com/

 

You may have to change your code to suit one of these.

Edited July 7, 201115 yr by Wickham

Hi Wickham

 

Thanks for the links, very helpful.

I'm a little confused as to where to add the wrap and other code to my exisiting webpage code but I'll have a good read again an try adding some code to the necessary places.

 

Thanks very much.

 

W