Zonder overlapping maar met verschuiving

Hallo,

Ik heb een laag die ik footer noem maar zodra de content laag groter wordt dan daar staat dan gaat de foto bijvoorbeeld over het menu heen.

Ik wil graag dat zodra de content laag groter wordt het menu naar beneden zakt.

Wie kan/wil me daar bij helpen?

Het script:

html, body, tr, td {
		text-align: justify;
	font-family: arial;
	font-size: 0.9em;
	color: #eee;
	background: #333;
}

#werklaag {
  	background: #333333;
	position: absolute;
	width: 780px;
	height: 420px;
	top: 50%;
	left: 50%;
	margin-left: -390px;
	margin-top: -210px;
}

#werklaag #footer {
	position: absolute;
	bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #333;
	width: 100%;
	text-align: center;
	font-family: arial;
	font-size: 0.9em;
	font-style: italic;
	word-spacing: 20px;
}

#footer a {
	text-decoration: none;
	color: #eee;
}
#footer a:link {
		color: #eee;

}
#footer a:hover {
		color: #eee;

}
#footer a:active {
		color: #eee;
}


#content a {
	text-decoration: none;
	color: #eee;
}
#content a:link {
		color: #eee;

}
#content a:hover {
		color: #eee;

}
#content a:active {
		color: #eee;
}

#header {
	position: absolute;
	width: 778px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-left: -389px;
	margin-top: -209px;
	background: url('gfx/logo.jpg');
	background-repeat: repeat-y;
	background-position: center center;	
}

#content {
	position: absolute;
	width: 778px;
	height: 300px;
	top: 50%;
	left: 50%;
	margin-top: -120px;
	margin-left: -389px;	 
}

.afbeeldinghome { 
 	float: left;  
	width: 250px; 
	height: 299px;
	margin-right: 10px;  
	background: url('gfx/dame.jpg');
	background-repeat: repeat-y;
	background-position: center center;	
}

.s2 { 
 	background: #333; 
	margin-right: 10px; 
	line-height: 20pt
	 }