Layout a tre colonne

**poeta1978** · 28-07-2004, 16:45

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!xDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>Tre colonne: Larghezza Fissa</TITLE>
<STYLE type=text/css>
BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana,helvetica,sans-serif; PADDING-TOP: 0px; TEXT-ALIGN: center
}
#bodyContent {
	MARGIN: 0px auto; WIDTH: 760px; TEXT-ALIGN: left
}
#testa {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 1em; PADDING-TOP: 1em;
}
#corpo {
	BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; BORDER-LEFT: #fff 1px solid; BORDER-BOTTOM: #fff 1px solid; POSITION: relative
}
#corpo-colonna1 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 1em; WIDTH: 160px; PADDING-TOP: 1em; POSITION: absolute; TOP: 0px
}
#corpo-colonna2 {
	BORDER-RIGHT: #fff 1px dotted; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 1em; MARGIN: 0px 200px 0px 160px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 1em
}
#corpo-colonna3 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; RIGHT: 0px; PADDING-BOTTOM: 1em; WIDTH: 200px; PADDING-TOP: 1em; POSITION: absolute; TOP: 0px
}
#piedipagina {
	BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 1em; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 1em; BORDER-BOTTOM: #fff 1px solid
}
</STYLE>

</HEAD>
<BODY>
<DIV id=bodyContent>
<DIV id=testa>testa</DIV>

<DIV id=corpo>
<DIV id=corpo-colonna1>corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1 corpo-colonna1</DIV>

<DIV id=corpo-colonna2>corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2 corpo-colonna2</DIV>

<DIV id=corpo-colonna3>corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3 corpo-colonna3</DIV></DIV>

<DIV id=piedipagina>piedipagina</CODE> 
</DIV></DIV>
</BODY>
</HTML>

Il codice sopra è adattato più o meno alle mie esigenze, ma se nella colonna 2, cioè quella centrale, si riduce il contenuto si scombussola la pagina perchè sale su il piedipagina... perchè?

**Mich_** · 29-07-2004, 09:14

prova ad aggiungere un clear:both; nel CSS del piedipagina;

Oppure vedi cosa consigliano nel sito www.constile.org

**Jerry Masslo** · 29-07-2004, 09:26

ti rispondo senza aver visto il codice, e con difficoltà anche perché usando code nel post la pagina mi è diventata sconfinata.

se vuoi che una psudo colonna sia al minimo alta un tot ti serve usare un min-heigth, esso non è letto dagli iexploder che però leggono come tale height, la complicazione è che i broswer standard leggono min-height e correttamente anche height quindi per avere un min-height per tutti occorre ricorrere a uno stratagemma attraverso l'uso d'important.

.boxAltoUnMinimo {min-height:80%; /*o altra misura adeguata, non letto dagli iexploder */
height:auto!important; /* questo serve per non far prendere l'height di sotto ai browser standard che serve solo per gli iexploder*/
height:80% /*non ha effetto sui browser standard che lo sovrascrivono con l'auto di sopra perchè è important mentre funziona da min-height sugli iexploder */
}
magari però ti bastava il link di mich.

**flanza** · 29-07-2004, 09:27

Secondo me il problema è che hai posizionato le colonne di sinistra e destra in modo assoluto e quindi gli altri div vi si sovrappongono se capita.
se vuoi fare facilmente un div a 3 colonne prova qui.

**poeta1978** · 29-07-2004, 09:54

Ho visto il link di flanza... è grande

L'altro codice l'ho preso proprio da www.constile.org, comunque grazie a tutti!

Discussione: Layout a tre colonne

Strumenti discussione

Ricerca discussione

Visualizza

Layout a tre colonne

Permessi di invio