Ciao,

non capisco il nesso tra tag semantici e stile della pagina, i tag semantici funzionano esattamente come dei div. Detto questo la section con id#main non ha una altezza (hai messo auto ma se guardi da firebug è calcolata 0) perché i box contenuti al suo interno sono in float, basta aggiungere le regole display: block; e overflow: hidden; alla section #main nel CSS, e vedrai che il footer andrà a posto da solo (togliendo quei bottom negativi e i posizionamenti come suggerito da Prill.