Colonna singola, il footer non si posiziona

[Spyfil]

Non ne vado fuori..
http://www.outlink.it/upload/files/layout.jpg

Non mi sembra complesso eppure non riesco a posizionare il footer.

dovrebbe essere così:
arancione con dimensioni fisse
verde con larghezza fissa e altezza automatica
rosso con larghezza fissa e altezza automatica
blu sotto, non sulla base della pagina ma alla fine della colonna + lunga..

mi succede invece che il blu mi va a finire appena sotto l'arancio sotto alle 2 colonne.

Questo l'html

<div id="Header"></div>

<div id="Main">
        <div id="MenuArticoli"></div>
        <div id="Articoli"></div>
</div>


<div id="Footer">
</div>

i css

html,body{margin:0;padding:0}
body{ font-family:Arial, Helvetica, sans-serif; background: #3a2e2b; text-align:center}
#Header{ width:969px; height:82px; border:none; margin: 0 auto; background:#FFF;}
#Main{ width:969px; height:auto; border:none; margin: 0 auto;}
#Footer{ width:969px; height:126px; border:none; margin: 0 auto; background-image:url(../immagini/sfondo.jpg); }
div#MenuArticoli{ width:392px; height:auto; border:none; float:left; }
div#Articoli{ width:577px; height:auto; background-image:url(../immagini/sfondo_2.jpg); background-repeat:repeat; float:left; }
div#ArticoliZero{ width:0px; height:auto; }

dove cavolo sbaglio??

[Mich_]

ti manca il clear.
Vedi ad esempio:
[Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

[Spyfil]

Grazie 1000.
Risolto così!