Una manera habitual de conseguirlo es sacar el div#footer fuera de div#main y ponerlo a continuación:
<body>
<div id="main"></div>
<div id="footer"></div>
</body>
Deberás hacer además varios cambios en el CSS.
En #footer debes usar una altura fija y un margen negativo con el fin de situar el pie dentro de la ventana del navegador, ya que main ocupa el 100% de ésta.
Puedes añadir, por ejemplo, las siguientes propiedades:
#footer {
height: 200px;
margin-top: -200px ; /*La altura del pie*/
}
La altura debes ajustarla según tu contenido.
Seguro que deberas modificar algunos colores de fondo. El de footer puede que debas quitarlo y añadir ese color en el background de body.
Es cuestión sólo de hacer algunas pruebas para que todo encaje de nuevo.