Can't get my footer at the right place

Can't get my footer at the right place

as you can see on this jsfiddle, http://jsfiddle.net/gGXzA/ my footer gets
mixed-up with my DIV .middle where I was expecting it to be placed
underneath (at the bottom of the page) Any idea what the issue is ? Many
thanks,
<div class="wrap980px blueback clear">
<div id="block-left"><p>Lueq ets el rôle ud cocha ?</p>
<ul>
<li>ovus éteocur vcea epetimha, cspetre te tieanrulté</li>
<li>svou aeermn à oivr la tiiunasot rettemaun</li>
<li>svuo iader à nidetrifie, en souv, les esossecrru nécaesiesrs ua
eahnemctgn</li>
<li>suvo meaern à rtvennie ortve roprpe iootnsul</li>
<li>ouvs ccremagopan outt ua glon de al eism en epac ud lpna d'ontaic
qjuus'à l'teiatnet de orvte etjibcof</li><ul></div>
<div id="block-right"><p>Euq peut ovsu praoptre un goccnhai ?
enrderrpe cnianefco ne usvo
uovs déraebssrra ed vso acsnoecyr aileinttsm et autsre epnsées néiavtsge
oedrirbn, easspr nu apc ildiffeic
anrdprpee à eifra caef axu asiuitnsto déiaeltcs
(er)nenord ud sesn à otrve evi
êert rtauec de rveot evi
raspes à l'otcnia, edinteatr ovs ifjbtcose
rdneno evi à vos rêsve
sovu nestri uexmi dsna tevor aupe, êter plsu hreuuxe
viora ed ueesrlmlei eatorsiln eacv els eutsar
rengga ud ptesm : orrunmtse uen dffcilutié upls ermpntadie que si usvo y
ieizfsa cfae ttuo esul.</p></div>
</div> <!-- End DIV 980px Clear-->
<div class="middle"><h1>Conclusion Ontcmme se déeourl nu cahcnoig de
evi?</h1>
<p>A iratpr ed etvro admnede, nsuo désinssnofi mlbenese un ijcofteb rpécsi
à tdreantie à eun adte ndnoée, sel seymno à reemtt en acpel ourp y evrirar
sniai qu'nu lpan d'tocani recctno.</p>
<p>La 1ree iesrp ed totcanc rpa télépeonh set gerutiat. C'set l'acooscni
urpo souv ed ilrvade uqe roevt dedemna teern nbie nsad el cerda d'nu
hacciogn, et de recoivre une rénospe à sottue els qnstueosi euq uvos suvo
eszpo.
Al 1ree séenac dreu 1h à 1h30 te a ropu obcijeft de leiarcifr rovte
nmededa. Snou nuso nettmso d'rcocda rus le thèem de teorv vrlatai de
caoigcnh et nruistcsnoso mebsneel le cottanr de cigcanoh terarnnep el
oenrmb ed séansce rpésuev, erlu fréqcnuee, uler durée, uelr iatfr. Ce
ttarocn tes rébjtalaues ua lfi sed séecsan te erts de lfi ountedcucr à
treno ritaavl.</p>
<p>Lse sénaecs tansviues tnso arsnccoése à rerpolex vrtoe rblpoéuaqmiet et
à exrif eds éateps rpéscsei vres eluselslqe unos ocsaenanvr bnmleese au
ufr et à esmeru. A euhqca étaep, onsu mrnesous els rporgés irselaés revs
l'ittteane ed orevt ciejbfot acipirlpn.
Al rndieèer sécena set snaocrcée à freai le oinpt sru el csorsseup ed
icachngo, l'fibecjot eitantt, els reesrssuco (re)déeutosvrec te
l'oemtnauoi auecisq.</p></div>
<div id="footer">!!!! Footer !!!! </div>
CSS
.middle {
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
height: 280px;
}
.wrap980px {
margin: auto;
width: 980px;
}
#block-left {
float: left;
width: 490px;
height: 300px;
background: #ccc;
}
#block-right {
float: right;
width: 490px;
height: 300px;
background: green;
}
.clear:after {
clear: both;
}
#footer{
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
height: 280px;
background:red;
margin-bottom: 50px;
}