mehrspraltig

[dennis94m]

hab den ratgeber zu mehrspaltigen inhalten gelesen, und folgendes problemchen:

ich habe 3-spaltigen Inhalt.
oben header darin logo darunter menu
links:submenu mitte:content rechts:news
footer

die darstellung kalppt soweit auch super, allerdings sobald ich den DIV .middle (siehe Code) mit Inhalt fuelle wird dieser einfach über den footer geschrieben. Der footer sollte aber immer unten dran haengen. wie loese ich das problem. bin mir schon am zaehne ausbeissen.

mein html:

<div class="wrapper">  
  
<div class="top">  
<div class="logo">Logo hier rein</div>  
<div class="menu">Menueintraege hier rein</div>  
</div>  
  
<div class="left">Submenueeintraege hier rein</div>  
<div class="middle">Inhalt hier rein</div>  
<div class="right">Sidebareintraege hier rein</div>  
  
  
</div><!--Wrapper-->  
  
<div class="footer">Copyright hier rein</div
~~~>  
  
  
mein css dazu:  
  
~~~css
.wrapper {  
	width:995px;  
	min-height:500px;  
	height:100%;  
}  
  
.top {  
	width:100%;  
	height:150px;  
        margin:0 auto 0 0;  
	background:url(header.png) no-repeat;  
}  
  
.logo {  
	width:215px;  
	height:85px;  
	margin:12px 0 21px;  
}  
  
.menu {  
        width:991px;  
	padding:2px 6px;  
}  
  
.left {  
	width:160px;  
	float:left;  
	padding:15px 0 0 55px;  
}  
  
.middle {  
	width:555px;  
	height:auto;  
	float:left;  
}  
  
.right {  
	width:210px;  
	height:100%;  
	min-width:210px;  
	min-height:100%;  
	margin-left:780px;;  
}  
  
.footer {  
        width:991px;  
	padding:2px 6px;  
}