Footer for copyright info

Ok to start of here is the page im working on http://trentamd.soc.staffs.ac.uk/student/level_2005/sr910424/about.html it's for a university personal webpage and im new to CSS but ive been hitting a brick wall since i decided to add a footer and copyright information (it needs to be there nad i need ot know what im doing wrong lol)

anyway you can view the html source easily and here is the css file code:

body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(images/background.gif);
background-position: 50%;
}
#banner {
position:absolute;
left:0px;
top:0px;
width:550px;
height:120px;
z-index:auto;
background-image: url(images/banner.jpg);
}
#navigation a:link {
color: #FFFFFF;
text-decoration: none;
}
#navigation a:visited {
color: #FFFFFF;
text-decoration: none;
}
#navigation a:active {
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
color: #FFFFFF;
text-decoration: underline;
}
#navigation {
position:absolute;
left:0px;
top:120px;
width:530px;
height:20px;
z-index:auto;
background-image: url(images/navbar.jpg);
padding-top: 3px;
padding-left: 20px;
color: #FFFFFF;
}
#h2 {
position:absolute;
left:0px;
top:142px;
width:550px;
height:37px;
z-index:auto;
overflow: visible;
border-bottom-style: dashed;
border-bottom-width: 1px;
border-bottom-color: #D50803;
color: #CD3504;
background-color: #FFFFFF;
}
#content {
position:absolute;
left:0px;
top:179px;
width:550px;
height:112px;
z-index:1;
}
#content a:link {
color: #000000;
text-decoration: underline;
}
#whole {
margin: auto;
width: 550px;
position: relative;
}
.sub {
color: #CD1803;
border-bottom-style: groove;
border-bottom-color: #CD1803;
border-bottom-width: thin;
}
#copyright {
position:absolute;
left:-1px;
top:577px;
width:549px;
height:19px;
z-index:auto;
visibility: visible;
text-align: center;
border-top-color: #FF0000;
border-top-style: solid;
border-top-width: thin;
}
#copyright a:link {
color: #000000;
text-decoration: underline;


now if youve been to my website you'll see that on three of the pages (Home, Links and Work) i have the footer at the bottom of the page in the right place but if my content goes over the amount of pixels set for it the footer/copyright stays in the content box and dosn't move down which i want it to do lol :(

now if you look at the about page you'll see all is good you get to the footer then it's about what 50px's awa from the content!:confused: anyone got any ideas on how to fix this? Ive had a look around but with no luck :(

You shouldn't be using absolute positioning for it.

In fact you shouldn't be using absolute positioning at all. There is no need to for that layout.

I'd say redo the layout using relative positioning and you'll see it'll flow together better.

ok thanks i'll change the positioning to relative :)

EDIT problem sorted thanks