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>
Rispondi quotando
