Can't get my footer at the right place

Question

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;
}

Answer 1

Like this

demo

css

*{
    margin:0;
    padding:0;
}
    .clear{
        clear:both;

    }

html

<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 class="clear"></div>
<div id="footer">!!!! Footer !!!! </div>

Answer 2

The problem is in the height of the .middle rule. Remove height and it will fix

Answer 3

Clear would be a good idea but you can also remove the static height from .middle.

Remove this:

.middle {
 height: 280px;
}

Answer 4

Just Use this css this will work fine DEMO

#footer{
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    height: 280px;
    background:red;
    margin-bottom: 50px;
    clear:both; /*ADDED*/
}
.middle {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 980px;
    height: 280px;
    clear:both; /*ADDED*/
}

Answer 5

This is due to a problem with your floats. You need to clear. You have, clear:after, but this doesn't work.

Add a class of .clear { clear: both; } and then a <div class="clear"></div> before the middle part.

See a fiddle here http://jsfiddle.net/gGXzA/2/