HTML/CSS : Problème de "float"

Bonjour,

alors voilà j'ai un petit problème sur lequel je m'arrache les cheveux depuis un petit moment.

En fait je souhaite faire un site avec :

Un menu à gauche en taille FIXE (250px de large).
Un corps juste à côté en taille VARIABLE (60%) pour que celui ci s'adapte à la résolution du visiteur.

Voici donc le code me permettant cela en html :

<div id="container">

<div id="menu_gauche_bg">
<div id="menu_gauche">
<a href="index.html" id="accueil" class="menu_gauche"></a>
<a href="index.html" id="structure" class="menu_gauche"></a>
<a href="index.html" id="activites" class="menu_gauche"></a>
<a href="index.html" id="accueil" class="menu_gauche"></a>
<a href="index.html" id="structure" class="menu_gauche"></a>
<a href="index.html" id="activites" class="menu_gauche"></a>
<a href="index.html" id="accueil" class="menu_gauche"></a>
<a href="index.html" id="structure" class="menu_gauche"></a>
<a href="index.html" id="activites" class="menu_gauche"></a>
</div>
</div>

<div id="body">
</div>

<div class="clear">
</div>

</div>

Le CSS :

#container {
background-image : url("images/container_bg.jpg");
background-repeat : repeat-y;
width : 100%;
}

#menu_gauche_bg {
background-image : url("images/carreau_gauche.jpg");
width : 250px;
float : left;
border-right : 2px solid pink;
}

#menu_gauche { padding-top : 100px; }

#body {
padding : 30px;
margin-top : 50px;
background-color : white;
margin-bottom : 50px;
margin-left : 50px;
float : left;
width : 60%
}

.clear { clear : both; }

Tout va à peu près bien mais lorsque je réduis la fenêtre (=quand la résolution est baissée) il arrive un moment où les deux blocs ne sont plus contenus dans le container (à cause de la taille du menu fixe, les deux blocs sont > 100%) et le #body se retrouve donc en dessous du fait de la propriété float : left.

J'ai essayé multitude de choses mais rien de vraiment fonctionnel.

Si quelqu'un voit comment faire ça bien proprement je suis preneur.

Merci d'avance