Tratamiento del footer en css

[josho]

Hola, si me pueden ayudar. Quiero mandar el footer al fondo o sea debajo de una imagen flotante (gif animado). Con el header no tengo problema, pues la imagen pasa por encima y se ve bien. El "drama" viene cuando se desplaza por lado del footer y este tapa la imagen.
El archivo style.css contiene lo siguiente:

/* CSS RESET */
html{color:#000;background:#FFF;}body,div,dl,dt,dd ,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset ,

legend,input,textarea,p,blockquote,th,td{margin:0; padding:0;}table{border-collapse:collapse;border-sp

acing:0;}fieldset,img{border:0;}address,caption,ci te,code,dfn,em,strong,th,var{font-style:normal;font

-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font

-weight:normal;}q:before,q:after{content:'';}abbr,a cronym {border:0;font-variant:normal;}sup

{vertical-align:text-top;}sub

{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:

inherit;}legend{color:#000;}

body {font:13px/1.231

arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-f

amily:monospace;line-height:100%;}
/* CSS RESET */


body {
text-align:center;
color:#000;
}
a {
text-decoration:none;
color:#9b3535;
}
a:hover {
text-decoration: underline;
color: #CC0000
}
#wrap {
width:900px;
text-align:left;
margin:0 auto;
background:url(images/bg.jpg);
}

.fl{ float:left}
.fr{ float:right}
.clearfix{ clear:both}


/* header */
#header { position:relative;height:111px; background:url(images/hd.jpg); }

#logo {position:absolute; top:30px; left:80px}
#logo h1 {
font-size:34px;
color: #9B3535
}
#logo div {
padding-left:100px
}
#nav { position:absolute; top:35px; left:420px; background:url(images/nav.jpg);

width:451px;height:30px; line-height:30px; padding:0 0 0 20px }
#nav li {float:left; font-weight:700; width:80px; padding:0 5px }
#nav a {text-decoration:none; display:block; text-align:center; color:#fff}
#nav a:hover {background: #AA4479; color:#000000}
/* content */

.img { margin:0px 0 0 70px }
.main {width:440px; font-family:Verdana, Arial, Helvetica, sans-serif;

background:url(images/box.jpg); color:#000;}
#text {margin:0px 0 0 65px }
#text p {margin:0 auto; width:420px; }
#text h2 {font-size:30px; padding:20px 0 20px 0}
#text img {margin:10px 0 0 0}
#col {margin:30px 0 10px 65px ;width:300px; background:url(images/col.jpg); width: 419px;

height:161px ; }

#col div {width: 150px; margin: 20px 0 0 10px; display:inline}
#col .first {margin: 20px 30px 0 20px;}
#col li{line-height:20px; list-style:inside disc;color:#9b3535;}
#col a { color:#9b3535; text-decoration:underline;}
.side { width:320px;display: inline;}
.side h2 {font-size:22px}
.side li {line-height:20px; list-style:inside disc; color:#9b3535; }
.side ul {margin:20px 0 30px 20px}
#top {margin-top:20px}
/* footer */
#footer { background:url(images/ft.jpg); height:100px; position:relative}
#ftinner{ position:absolute; bottom:20px; width:680px; margin-left:80px; color:#E98383}
#ftinner a {color:#FFFFFF}
.ftlink {width:500px;}

Desde ya muy agradecido y perdonen porque no entiendo mucho de los estilos.
Gracias a todos.