Salut, j´ai un problème avec mon CSS que je ne comprend pas, mon but est de faire un desyn extensible (en pourcentage) avec un header en haut (div #header), un menu a gauche (div #menu), le corp au centre (div #corps), et un menu a droite (#tuto).
Voici mon css :

body
{
width: 100%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
}

1. header

{
width: 100%;
height: 100px;
background-image: url("images/banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

1. menu

{
float: left;
width: 20%;
margin-left: 3%;
margin-right: 2%;
}

1. corps

{
margin: auto;
margin-bottom: 20px;
padding: 5px;
width: 50%;
background-image: url("images/motif.png");
background-repeat: repeat-x;
border: 1px solid black;
}

1. tuto

{
float: right;
width: 20%;
margin-left: 3%;
margin-right: 2%;
}

Bref rien de complex, pourtant quand je l´applique mon #menu est bien flotant mais DANS le corps qui n´est lui même pas au centre mais a droite
http://img168.imageshack.ck.us/img168/7474/desynfx8.jpg

Bref j´aimerais que quelqu´un m´explique comment resoudre ça ...
Voici une partie du code html qui va avec (pour montré que ce n´est pas juste un problème d´inclusion dans un block, enfin jcroi ...).

<div id="menu">
<h3>Menu</h3>
<ul>
<li><a href="page1.html">Acceuil</a></li>
<li><a href="page2.html">Equipe</a></li>
<li><a href="page3.html">Forum</a></li>
<li><a href="page4.html">Livre d´or</a></li>
</ul>
</div>

<div id="tuto">

<h3>Tutorial</h3>
<h2>Guitare classique</h2>
<ul>
<li><a href="Ga/Chap1.php">Chapitre 1</a></li>
<li><a href="Ga/Chap2.php">Chapitre 2</a></li>
<li><a href="Ga/Chap3.php">Chapitre 3</a></li>
<li><a href="Ga/Chap4.php">Chapitre 4</a></li>
</ul>

<h2> Guitare électrique</h2>
<ul>
<li><a href="Ge/chap1.php">Chapitre 1: Introduction</a></li>
<li><a href="Ge/chap2.php">Chapitre 2: La main droite</a></li>
<li><a href="Ge/chap3.php">Chapitre 3: La main gauche</a></li>
<li><a href="Ge/chap4.php">Chapitre 4: Entraînement</a></li>
<li><a href="Ge/chap5.php">Chapitre 5: Un peu de technique</a></li>
</ul>
</div>

<div id="corps">

Ici il y a le text

</div>

Un design on dit

lol c´est quoi ? Du latin !? essaye de ne pas mettre margin: auto et de mettre margin-left: 1px;

Non c´est un Lorem Ipsum :
http://fr.wikipedia.org/wiki/Lorem_ipsum

Sinon le margin-left ca a l´air de rien changer.

Laissez tombé j´ai résolue mon problème ^^