Problème de div qui se chevauchent

Bonjour à toutes et tous!,

je tente de régler mais sans succès une mise en page avant de mettre en page le gabarit dont j'ai besoin.

voila ma structure:

<div id="container">
<div id="nowrap">
<div id="header">	HEADER</div>

<div id="content">
<div id="left-content">

<div id="left-content-top">
 left top<br />
B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />B<br />
</div>

<div id="left-content-bottom">left bottom<br />
A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />A<br />
</div>
		
</div>
	
	
	<div id="content-central">
content<br />

</div>
<!--Fin Content --->
 </div>
	
<!--Fin Nowrap ---></div>
	
<div id="footer">
Footer
<!--Fin Footer --->
</div>

 <!--Fin Container --->
</div>

par rapport au gabarit classique l'on peut trouver tout pret, j'ai besoin dans ma colonne de gauche d'une partie top et une partie bottom.

j'ai donc le css suivant:

				html, body {
				height: 100%;
				}
				
			body {
				border:0;
				margin:0;
				padding:0;
				font:70%/160% "verdana",sans-serif;
				color:#192666;
				text-align:center}
				
				
			#container {
			position: relative;
				min-height: 100%;
				height: 100%;
				voice-family: "\"}\"";
				voice-family: inherit;
				height: auto;
				width: 100%;
				margin:0px;
			}
			
			#wrap {
				overflow: hidden;
			}
			
			#header { 
				width: 100%;
				height: 50px;
				margin: 0 auto; 
				background: transparent url(images/imgtop.jpg) repeat-x;
				padding-top: 30px;
				color: #555;
				font-size: 34px;
				text-align: center;
} 
			
			#content {
				text-align: left;
				padding-bottom: 30px;
			}
			
			#left-content { 
				float:left; 
				width:180px; 
					} 
			
			#left-content-top { 
				display: block;
				background: lightblue;
				height: auto;
				overflow: hidden:
			} 
							
							
			#left-content-bottom { 
				position: absolute;
				bottom: 15px;
				width:180px; 
				background: orange;
				height: auto;
			
			} 
			
			
			
			#content-central { 
				display: block;
				padding-left: 180px;
				background: red;
			} 
			
			
			#footer {
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: yellow;
				width: 100%;
				color: black;
				overflow: hidden;
			}
	

mon problème est que si je réduit la fenêtre ma colonne de fauche déconne totale.
mon left top passe en dessous du left top qui lui même passe au dessus de header!
au bout d'un moment le left top reapparait mais sous le footer.
A n'y rien comprendre!

je souhaite juste que mes menus soient fixes et que si quelqu'un réduit la fenêtre les parties qui se superposent disparaisse ou quelque chose comme ça.
Quelqu'un pour m'aider please?

merci d'avance
Modifié par Darkangel (22 Nov 2011 - 15:14)