Html et css

Bonjour,
ayant la mauvaise habitude de faire les sites internet sous forme de tableau, j'ai enfin décidé de me mettre à code correctement.
j'ai un problème de positionnement au niveau de mes <div>



il y a en tout 5 div(s) : le premier correspond à la bannière, le second correspond au menu du centre positionné juste en dessous de la bannière, le troisième au menu de gauche, le quatrième au corps de la page et le dernier est le pied de page.

Le problème étant que le pied de page remonte jusqu'au div de l'entête lorsque je met un float:left; et un float:right; respectivement au div du menu et du corps.

code html :

<div id="en_tete"></div>
<div id="menucentre">
<table><tr><td><a href="recrutement" style=' color:#151845;'>Recrutement</a></td><td><a href="recrutement" style=' color:#151845;'>Autre lien</a></td></tr></table></form>
</div>


<div id="menu">
<p>dfrdrde</p>
</div>

<div id="corps">
<p>yvgyvyhvb<br />yvgyvyhvb<br /></p>
</div>

<div id="pied_de_page">
<p>test test test </p>
</div>

code css :


body
{
margin: auto; /* Pour centrer notre page */
background-color:#000000; /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
width: 760px;
}

#en_tete
{
width: 760px;
height: 80px;
background-color:#111111;
margin: auto; /* Pour centrer notre page */
}

#menucentre
{
width: 760px;
height: 25px;
background-color:#000000;
margin: auto;
}

#menu
{
width: 150px;
background-color:#899549;
float: left;
}

#corps
{
width: 610px;

background-color:#855815;
float: right;
}


#pied_de_page
{
width: 760px;
height: 30px;
background-color:#858415;

}

p{
margin:2px;
}

a{
text-decoration:none;
}



Le problème c'est que le pied de page ignore totalement le corps et le menu de gauche lorsque j'ajoute les float.

Voila, merci d'avance