Layout a 3 colonne

[andre82]

Sto facendo il restyling del mio sito web, ho guardato la guida di html e ho scelto la struttura formata da 3 colonne. Su tali modelli messi a disposizione da html sto cercando di modellare il mio dito web...però ho un problema:

se una colonna ai lati è più lunga di quella al centro il footer la sormonta, disponendosi sotto la colonna centrare, come potete vedere qui: www.latrave.h3nt.net/home.html

ho provato mettendo la prima colonna come float: righe e quella di sinistra come float: left ed infine il footer mettendo clear: both non funziona

Chi mi sa aiutar?e
please

[Mich_]

Io ho visto un sito a due colonne, fatto con tabelle innestate, con attributi di formattazione deprecati, ecc.

Forse non hai dato il link corretto ...

[andre82]

Scusatemi ecco qui il link corretto

[andre82]

E' un grosso problema?

Questa notte ho pensato: perchè non aggirare l'ostacolo mettendo il footer sempre in fondo allo schermo? E' una soluzione che può funzionare secondo voi?

[jepers]

Anche io ho realizzato da poco un layout come il tuo e per il tuo problema ho fatto cosi:
nel footer invece di clear:right; scrivi clear:both; e le 2 colonne non andranno più sul footer neanche se più lunghe.

[andre82]

Ho appena provato, ma non cambia niente...questo è il link al file css

[jepers]

Prova a farlo cosi:

/* stile per il layout*/
html, body{margin:2px; padding:2px;}
body{text-align:center;/*centra in IE5x*/
text-decoration:none;
line-height:1.5;
color:navy;
background-color:#F5FFFA;
font-size:13px;
color:navy;
text-decoration:none;
font-family:arial,verdana,geneva,sans-serif;
}
#contenitore{ width:760px;
border:5px hidden #ffffff;
margin:0px auto;/*centra nella pagina */}
#testa{border-bottom:2px hidden #000000;
height:130px;
}
#piede{border-top:2px hidden #000000;
height:30px;
clear:both;
font-size:12px;
}
#navigazione{float: left;
width: 170px;\width:170px;w\idth:160px;/*serve perchè cosi IE interpreta bene le dimensioni*/
padding: 1em 0px 0 10px;
text-align:left;/*definisce l'allineamento*/
border-right:2px hidden #000000;
border-bottom:2px hidden #000000;
}
#extra{float: right;
width: 170px;\width:170px;w\idth:160px;/*serve perchè cosi IE interpreta bene le dimensioni*/
padding: 1em 0 0 10px;
border-left:2px hidden #000000;
border-bottom:2px hidden #000000;
text-align:center;/*definisce l'allineamento*/
}
#contenuto{margin: 0 170px;
padding: 1em 10px;
text-align:justify;/*definisce l'allineamento*/
}


nel body della pagina scrivi:

<div id="contenitore">

<div id="testa"></div>
<div id="navigazione"></div>
<div id="extra"></div>
<div id="contenuto"></div>
<div id="piede"></div>

</div>