Cambia en el estilo #footer el "position:relative;" por "position:fixed;" y dale un "width:100%;"
Quedaria asi:
Código:
#footer {
width:100%;
position: fixed;
margin-top: -40px; /* La altura del footer en negativo, para hacer que suba y no haya scroll vertical */
line-height: 40px;
clear:both; /* Para que no quede por debajo de elementos flotantes */
background-color: #4D4D4D;
text-align: center;
color: #BABABA;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 12px
}
Saludos
EDITO:
Me acabo de dar cuenta que el footer te queda sobre el contenido y vi un error en tu codigo.
En el CSS tenes declarados estilos para
#main y en el HTML no hay main, hay
main2.
Hace esto, en el CSS agregale el 2 al estilo #main, que quede #main2 y en el interior solamente colocas un margin-bottom para que el footer no te tape el contenido.
Código:
#main2{
margin-bottom:60px; //40px del footer + 20px de margen para que quede una pequeña separacion sin importar el tamaño del main2.
}
Probalo asi deberia funcionar.