tre colonne che non si allineano in altezza

**inside1** · 17-12-2004, 23:57

Ciao a tutti
ho un problema che non riesco a risolvere con i css. Ho tre colonne contenute in un contenitore ma vorrei che stessero tutte alla stessa altezza sia con IE e con FireFox questo è il codice

codice:

body { 
font:80% verdana,helvetica,sans-serif; 
margin:0;padding:0;
text-align:center
}
#bodyContent { width:760px;text-align:left;margin:0 auto; }
code { font:80% verdana,helvetica,sans-serif; display:block; margin:0 1em .5em 1em; }
hr { display: none; }
	

/* testa */
#testa {
   border: 1px;
   top: 0px;
	width: 740px;
	height: 103px; 
	position: absolute;
		
}

/* corpo */
#corpo {
	border:1px solid;
	top:125px;
	width:740px;
	position:relative;

}
#corpo-colonna1 {
	background-color:#A5CEE7;
	margin:0 0 0 0;
	top: 0px;
	left: 0px;
	width:110px;
	height: auto;
	padding: 0;
	position: absolute;

}
#corpo-colonna2 {
   height: auto;
	margin:0 110px 0 110px; 
	background:#fff; 
	padding: 0;
	 
	
}
#corpo-colonna3 {
	position:absolute;
	top:0;
	right:0;
	width:110px;
	background-color:#A5CEE7;
	height: auto;

}

/*pie' di pagina */
#piedipagina { 
	background:#eee; 
	border:1px solid #000; 
	padding:1em 0; 
}
#fronte {
 margin: 0 0 0 0 ;
 background: #FFFFFF;
 position: absolute;
 vertical-align: bottom;
 top: 103px;
 width: 740px;
 border:1px solid #000;
 }

La colonna 1 e 3 non si allineano in altezza con la colonna 2, visto che questa colonna ha più contenuto delle altre. Volevo fare in modo che le colonne 1 e 3 si adattassero in altezza quando il contenuto della colonna 2 aumenta.

Grazie per il vostro aiuto perchè le ho provate di tutte..

**Kreatore** · 20-12-2004, 19:32

devi usare un sistema di annidamento:

codice:

<html>
<head>
<style type="text/css">
body {color:white;
background:gray;
font-weight:bold;
font-size:150%;
}
.uno {
background: blue;
border:2px solid silver;
width:700px;
display:table;
}
.due{
width:600px;
float:left;
background: red;
}
.due .ilp{
width:99px;
float:left;
}
.tre{
background: green;
float:right;
width:500px;
}
</style>
</head>
<body>
<div class="uno">
<div class="due"><p class="ilp">questo è il testo della seconda colonna</p>
<div class="tre">

il secondo
 float guida l'altezza
 
</div>
</div>
</div>

</body>
</html>

prova questo

**pierofix** · 20-12-2004, 22:35

Oppure usa delle colonne "fittizie", ricavate con un'immagine di sfondo, come qui:

- www.itgmarinoni.it

Questo è l'articolo che spiega come fare:

- http://www.alistapart.com/articles/fauxcolumns/

**inside1** · 21-12-2004, 00:34

Mille grazie per il vostro intervento..
Ok creatore provo e ti faccio sapere..

pierofix grazie anche a te..

ok a dopo per darvi notizie della riuscita o meno...

Grazine ancora

**inside1** · 21-12-2004, 22:27

prova questo

Ciao ho provato il codice che mi hai dato ma penso che non sia come volevo.
Ho fatto uno schema do come dovrebbe venire la pagina.
Eccolo QUI , è un' immagine...
Non posso usare colonne fittizie perchè mi serve distinguere le tre colonne.

Ok aspetto un vostro gentile intervento...
A presto

**pierofix** · 21-12-2004, 22:47

In che senso "mi serve distinguere le tre colonne"? Usare le colonne fittizie è come creare colonne "prive di stile", solo larghezza e posizione; il resto lo fa l'immagine di sfondo. Puoi anche fare sei, sette, otto colonne.

**inside1** · 21-12-2004, 23:24

Si scusa non mi sono spiegato bene con " distinguere le tre colonne ". Prendendo come schema l' immagine che ho preparato...
Io volevo far visualizzare il layout come da schema, ma come codice volevo mettere per prima la parte con scritto "testotesto...", di seguito la colonna centrale poi la colonna 3 e poi la colonna2 e in fine la testata.
Non so se con l' esempio da te fatto si possa realizzare la medesima cosa, penso cmq di si altrimenti non saresti intervenuto, solamente che per imparare mi servirebbe uno schema di quella pagina un pò più smeplice senza troppo contenuto... almeno posso rendermi conto del codice.
Ti ringrazio

Discussione: tre colonne che non si allineano in altezza

Strumenti discussione

Ricerca discussione

Visualizza

tre colonne che non si allineano in altezza

Permessi di invio