probleme de block à la mauvaise place

salut, j'apprends à faire des sites avec du CSS et tout grâce à ce super site

pour ca j'ai créé un petit design voila un apercu de ce que ca devrait donner : Image utilisateur

mais au lieu de ca ca donnne ca : Image utilisateur

ce qui va pas : le bloc "stats" qui est censé etre en dessous du bloc de lien est a coté et au dessus du bloc texte, le bloc texte lui se répete en bas et à droite, et enfin le footer il lui manque un tout petit bout d'image à droite et je trouve pas pourquoi. Voila le code HTML :

Citation : Code HTML

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1–strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="indexcss.css" />
</head>
<body>
<div id="en_tete">
<!–– Ici on mettra la bannière ––>
<h2><center><br/><br/>Votresite.Con</center></h2>
</div>
<div id="lien_important">
<!–– Ici on mettra les liens importants ––>
<center>..:: Lien 1 | Lien 2 | Lien 3 ::..</center>
</div>

<div id="menu"> <!–– Cadre englobant tous les sous–menus (en bleu marine sur le schéma) ––>

<div class="element_menu"> <!–– Cadre correspondant à un sous–menu ––>
<li>Lien1</li>
<li>Lien2</li>
<li>Lien3</li>
<li>Lien4</li>
<li>Lien5</li>
</div>

</div>

<div id="stat"> <!–– Cadre englobant tous les stat (en bleu marine sur le schéma) ––>

<div class="element_stat"> <!–– Cadre correspondant à un sous–menu ––>
2 connectés
</div>

</div>

<div id="corps">
<h2> News :</h2>
<p>lorem ipsum dolor si amet etc</p>
</div>

<div id="pied_de_page">
<p>Copyright All right reserved to clic-graphique.net</p>
</div>
</body>
</html>

et enfin le code CSS :

Citation : Code CSS

body
{
width: 760px;
margin: auto;
margin-top: 30px;
margin-bottom: 20px;
background-image: url("images/fond.jpg");
}

/* L'en-tête */

#en_tete
{
width: 771px;
height: 126px;
background-image: url("images/header.jpg");
background-repeat: no-repeat;
}
#lien_important
{
width: 771px;
height: 37px;
background-image: url("images/lien-important.jpg");
background-repeat: no-repeat;
margin-bottom: 15px;
}
#menu

{
float: right; /* Le menu flottera à gauche */
width: 164px; /* Très important : donner une taille au menu */
}

.element_menu
{
width: 164px;
height: 295px;
background-image: url("images/bloc-lien.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
padding: 60px;
}
#stat
{
float: right;
width: 164px;
}

.element_stat
{
width: 164px;
height: 295px;
background-image: url("images/bloc-stats.jpg");
background-repeat: no-repeat;
}
#corps
{
width: 596px;
height: 544px;
margin-right: 544px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 10px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

background-image: url("images/bloc-texte.jpg");
}

#pied_de_page
{
padding: 5px;
text-align: center;

background-image: url("images/footer.jpg");
background-repeat: repeat-x;

}