Ragazzi, ho il seguente problema: ho un layout fatto a div diviso con un footer un corpo formato da 3 colonne e un footer ora se nella prima colonna di sinistra scrivo molto testo (purtroppo è dinamico quindi a lunghezza variabile) il testo si sovrappone al footer, invece io vorrei che il il footer scendesse mentre il div si allunga.
Eccovi il mio codice:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Tre colonne: Liquido con colonne a larghezza fissa</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-- 
body { 
	font:80% verdana,helvetica,sans-serif; 
	margin:0; padding:0
}
code { font:80% verdana,helvetica,sans-serif; display:block; margin:0 1em .5em 1em; }
hr { display:none }

/* centrare la pagina web a larghezza fissa */
body { text-align:center }  
#testa { width:760px; margin:1em auto; text-align:left }
#corpo { width:760px; margin:1em auto; text-align:left }
#piedipagina { width:760px; margin:1em auto; text-align:left }

/* testa */
#testa { 
	background:#ccc; 
	border:1px solid #000; 
	padding:1em 0; 
}

/* corpo */
#corpo { 
	position:relative; 
	background:#f0f0f0 url(sfondo_colonna1.png) repeat-y; 
	border:1px solid #000; 
}
#corpo-colonna1 { 
	position:absolute; top:0; left:0; 
	width:140px; 
	padding:1em 0; 
	float:inherit;
}
#corpo-colonna2 { 
	margin:0px 140px 0px 140px; 
	border-left:1px solid #000; 
	border-right:1px dotted #000; 
	background:#fff; 
	padding:1em 0;
 
}
#corpo-colonna3 { 
	position:absolute; top:0; right:0; 
	width:140px; 
	padding:1em 0; 
}

/*pie' di pagina */
#piedipagina { 
	background:#eee; 
	border:1px solid #000; 
	padding:1em 0; 
	float:inherit;
}
-->
</style>
</head>
<body>

<div id="testa">
	<code>#testa { width:90%; margin:1em auto; text-align:left }</code>
	<code>#testa {
background:#ccc; 
border:1px solid #000; 
padding:1em 0; 
}</code>

</div>

<hr />

<div id="corpo">
	<div id="corpo-colonna1">
		<code>#corpo-colonna1 {
position:absolute; 
top:0; left:0; 
width:160px; 
padding:1em 0; 

		}klnjljljhljlkj lhkh khjh kj hkj kjhkh kjhkhkj hk hk hk h h kjhkhkj hk hk hk hh kjhkhkj hk hk hk hh kjhkhkj hk hk hk hh kjhkhkj hk hk hk hh kjhkhkj </code>	</div>

	<hr />
	<div id="corpo-colonna2">
		<code>#corpo-colonna2 {
margin:0 200px 0 160px; 
border-left:1px solid #000; 
border-right:1px dotted #000; 
background:#fff:
padding:1em 0; 
}</code>
		<code>#corpo { width:90%; margin:1em auto; text-align:left }</code>
		<code>#corpo {
position:relative; 
background:#f0f0f0 url(sfondo_colonna1.png) repeat-y; 
border:1px solid #000; 
}</code>

		<code>body {
text-align:center; 
font:80% verdana,helvetica,sans-serif; 
margin:0; padding:0
}
code {
 font:80% verdana,helvetica,sans-serif; 
display:block; 
margin:0 1em .5em 1em; 
}
hr { display:none }</code>
	</div>
	<hr />

	<div id="corpo-colonna3">
		<code>#corpo-colonna3 {
position:absolute; 
top:0; right:0; 
width:200px; 
padding:1em 0; 
}</code>
	</div>
</div>

<hr />

<div id="piedipagina">

	<code>#piedipagina { width:90%; margin:1em auto; text-align:left }</code>
	<code>#piedipagina {
background:#eee; 
border:1px solid #000; 
padding:1em 0; 
}</code>
</div>

</body>
</html>