Div en position absolute qui recouvre le footer....

Bonjour, bonjour,

encore moi
J'ai bien trouvé une solution pour étirer ma colonne de menu en fontion de la hauteur de la div du contenu mais à présent quand mon menu lui est plus grand que le contenu, il passe au-dessus de mon footer. Je ne m'en sors pas. Je commence à tout mélanger si ce n'est pas déjà fait.

la page : http://alarenverse.com/nouveau1024/testcolonne.html#[/url]

le HTML (je vous fais grâce du tableau)

<div id="container_bot">
<!-- MENU GAUCHE CONTENU -->
<div class="main_margin" style="position:relative;">

<div id="menu_gauche">
<div class="fond">
	<h4 id="ssrb"><a href="#">Sous-rubriques</a></h4>
   		<ul class="menuGS">
      	<li><a href="#">Mes responsabilités</a></li>
        <li><a href="#">Mes tâches</a></li>
		</ul>
    <h4 id="tris"><a href="#">Tris</a></h4>
    <div class="nolist">
        <div class="select"><a href="#">Par domaines</a></div>
        <div class="select"><a href="#">Par projets</a></div>
        <div class="select"><a href="#">Par tâches</a></div>
        <div class="select"><a href="#">Par intervenants</a></div>
    </div>
    
    <h4 id="time"><a href="#">Période</a></h4>
   	<ul id="letter">
		<li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>	
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
        <li><a href="#">I</a></li>
        <li><a href="#">J</a></li>
        <li><a href="#">K</a></li>
        <li><a href="#">L</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">N</a></li>
        <li><a href="#">O</a></li>
        <li><a href="#">P</a></li>
        <li><a href="#">R</a></li>
        <li><a href="#">S</a></li>
        <li><a href="#">T</a></li>
        <li><a href="#">U</a></li>
        <li><a href="#">V</a></li>
        <li><a href="#">W</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">Y</a></li>
    	<li><a href="#">Z</a></li>
        <li class="allprojet"><a href="#">Tous les projets</a></li>
	</ul>
<div class="clear"></div>
    <h4 id="rb"><a href="#">Rubriques</a></h4>
    	<ul class="menuGS">
        <li><a href="#">Aide</a></li>
        <li><a href="#">Telécharger en PDF</a></li>
        <li><a href="#">Telécharger en Excel</a></li>
		</ul>
</div>
<div class="clear"></div>        
</div>

<div id="contenu">
<table class="hosting_plans2" border="0" cellpadding="0" cellspacing="0" align="center">				
	<tbody>
	<tr>
    </tr>
	</tbody>
	</table>
</div>


</div>
<!-- FIN CONTENU -->

<div id="close">Copyright © bl	blalalala</div>

<!-- FIN CONTAINER BOT -->
</div>

et CSS

.main_margin{
padding:1px 10px;
max-width:1260px;
min-width:780px;
margin:0 auto;
}

#container_bot{background:#FFF url(img/bckgrd/Degrade_regular_bot.gif) left top repeat-x; padding:0; margin:0; position:relative;}


/*------------------- CONTENU / TABLEAU
-----------------------------*/

#contenu{
margin:30px 0 0 180px;
padding:0;
}

/*---------- MENU GAUCHE 
-----------------------------*/
#menu_gauche{
position:absolute;
width:160px;
border:solid 1px #CCC;
padding:3px;
left:10px;
margin:46px 0 0 0;
}

.fond{
background-color:#EAEAEA;
height:100%;
}


/*--------- FOOTER
--------------------*/


#close{
	position:relative;
	height:22px;
	width:100%;
	line-height:22px;
	text-align:center;
	font-size:10px;
	color:#333;
	border-top:1px #CCC solid;
}

Je n'ai mis que les divs principales.

Merci de votre aide,
A.