Höhe des Footers

naja, das eine problem habe ich besiegelt, nun folgt auch schon das nächste:

ich möchte unterhalb des contents einen footer platzieren, welcher jedoch im FIREFOX von dem contentlayer übergangen wird, im IE aber richtig dargestellt wird.

hier mein beispiel code:

<style type="text/css">
<!--
#Layer1 {
	width:600px;
	height:300px;
	background:#CCCCCC;
	z-index:1;
}
#Layer2 {
	position:relative;
	float:left;
	width:200px;
	height:300px;
	background:#999999;
}
#Layer3 {
	position:relative;
	float:left;
	width:400px;
	height:300px;
	background:#FFFFCC;
}
#Layer4 {
	position:relative;
	height: 600px;
	margin: 10px 10px 10px 10px;
	background:#FFCCCC;
}
#Layer5 {
	position:relative;
	width:600px;
	height: 20px;
	background:#66CCFF;
	z-index:2;
}
-->
</style>
<div id="Layer1">
	<div id="Layer2">
	NAVIGATION
	</div>
	<div id="layer3">
		<div id="Layer4">
		  <p>CONTENT</p>
		  <p>HIER WIRD DER INHALT PLATZIERT WELCHER ZU DEN  SEITEN DEN ENTSPRECHENDEN ABSTAND HAT.  </p>
		</div>
	</div>
</div>
<div id="Layer5">
	FOOTER
</div>

Die Position des Footers #Layer5 richtet sich nach der Höhe des darüberliegenden Elements #Layer1 - und die beträgt nur 300px; Ein in #Layer1 liegendes Element (#Layer4) ist zwar 600px hoch, aber dies ist für Firefox kein Anlass, das Elternelement entsprechend auszudehnen. Du musst auch für #Layer1 eine entsprechende Höhe angeben, damit der Footer auc in Firefox nach unten geschoben wird