[CSS] Bug {float: right/left}

Bonjours je suis en train de creer un site mais j'ai un petit probleme .j'ai envie de creer 2 rubrique j'aimerai en mettre une de chaque coté (coté gauche et droit) mais quoi que je fasse la 2eme rubrique reste sur le meme coté que la 1ere rubrique.

Mon code XHTML:
<div id="menudroite">

<div class="designmenu">
<h3>Titre menu</h3>
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>

<div class="designmenu">
<h3>Titre menu</h3>
<ul>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>

<div id="menugauche">

<div class="designmenu">
<h3>Titre menu</h3>
<ul>
<li> <a href="page1.htm">Lien</a></li>
<li> <a href="page2.htm">Lien</a></li>
<li> <a href="page3.htm">Lien</a></li>
</ul>
</div>
<div class="designmenu">
<h3>Titre menu</h3>
<ul>
<li> <a href="page1.htm">Lien</a></li>
<li> <a href="page2.htm">Lien</a></li>
<li> <a href="page3.htm">Lien</a></li>
</ul>
</div>
</div>

Il n'y a pas le haut de la page..

Le code CSS:

body
{
width: 760px;
margin: auto; /* page centré */
margin-top: 20px; /* marge de 20px en haut */
margin-bottom: 20px; /* marge de 20px en bas */
background-color: red /* la couleur du fond rouge */
}



#menudroite
{
float: right; /* positionné a gauche */
width: 120px; /* taille du menu */
}


.designmenu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}

#menugauche
{
float:right;
width:120px
}

Merci de vos reponses.