Überlappende DIV's im IE 7

[HoschMOsch]

Hallo,

nachdem ich nun tagelang versuche hier das Problem zu lösen, muss ich jetzt einfach mal auf euch Profis zurückgreifen.

  
/******************************************************* LAYOUT BEGIN*/  
#div_left {  
	float:left;  
	width:200px;  
	}  
  
#div_right {  
	float:right;  
	width:200px;  
	margin-right:-4px;  
	}  
  
#div_content{  
	width:598px;  
	margin-left:181px;  
	}  
#div_container {  
	width:960px;  
	height:auto;  
	margin-left:0;  
	margin-right:auto;  
	text-align:left;  
	}  
#div_body {  
	height:auto;  
	}  
  
#div_right-top{  
	background-image:url('../../images/right-top.jpg');  
	background-repeat:no-repeat;  
	height:33px;  
	}  
  
#div_right-middel{  
	background-image:url('../../images/right-middel.jpg');  
	background-repeat:repeat-y;  
	height:auto;  
	}  
#div_right-bottom{  
	background-image:url('../../images/right-bottom.jpg');  
	background-repeat:no-repeat;  
	height:20px;  
	}  
#div_left-menu-top{  
	background-image:url('../../images/left-top.jpg');  
	background-repeat:no-repeat;  
	height:37px;  
	}  
  
#div_left-menu-middel{  
	background-image:url('../../images/left-middel.jpg');  
	background-repeat:repeat-y;  
	height:auto;  
	}  
  
#div_left-menu-bottom{  
	background-image:url('../../images/left-bottom.jpg');  
	background-repeat:no-repeat;  
	height:20px;  
	}  
  
  

Hier das HTML Gerüst

  
<div id="div_body">  
		<div id="div_left">  
			<div id="div_placeholder-left"></div>  
			<div id="div_left-menu-top"></div>  
			<div id="div_left-menu-middel">  
				<div id="div_mainmenu">###MAINMENU###</div>  
			</div>  
			<div id="div_left-menu-bottom"></div>  
		</div>  
		<div id="div_right">  
			<div id="div_placeholder-right"></div>  
			<div id="div_right-top"></div>  
			<div id="div_right-middel">  
				<div id="div_options">  
					<ul>  
						<li>###PRINT###</li>  
						<li>###PDFPRINT###</li>  
						<li>###TIP###</li>  
  
					</ul>  
				</div>  
			</div>  
			<div id="div_right-bottom"></div>  
		</div>  
		<div id="div_content">  
			<div id="div_content-top">  
				<div class="placeholder"></div>  
				<span class="headline">###HEADLINE###</span>  
			</div>  
			<div id="div_content-middel">  
				###CONTENTAREA###  
				<hr class="endofline"/>  
				<a title="Zum Seitenanfang" class="nachoben" href="#top"></a>  
			</div>  
			<div id="div_content-bottom"></div>  
		</div>  
	</div>  
  

Das Problem ist das die Layout Elemente "left" "right" "middel" gefloted sind. Die Hintergrundbilder passen nicht genau aufeinander da ich noch ein schattenverlauf habe. deswegen hab ich versucht mit negativen margin einstellungen die bilder zusammenzupuzzel. das funktioniert auch im IE8 und ich Firefox. nur im IE7 wird der mittlere teil weit nach unten geschoben.

Hat jemand ein Tip ?

gruß Hoschie