Layout 3 colonne - Perchè le due colonne non vengono giu insieme al contenuto?

**Leo91** · 09-07-2007, 19.48.58

Salve a tutti...

ormai son 3 giorni che sbatto la testa... ma come diavolo devo fare perchè quelle due colonne scorrano insieme al contenuto??!
Ho una pagina dinamica, che si riempirà sempre di più di contenuto, quindi non posso impostare un height fisso.

Ho impostato sul foglio di stile per html, body, la classe del contenitore globale, la classe de contenitore del contenuto e delle due colonne e per le classi delle due colonne un height: 100%.

Così APPARENTEMENTE sembra funzionare, infatti (con il padding e il margin del body su 0px) sembra che le colonne e il contenuto si allunghino.
Ma basta smuovere i bordi della finestra del browser, per rendersi conto che non si espandono con il contenuto, ma vanno a fare proprio quello che gli chiedo: andare al 100%...si ma della pagina.

Se imposto quella proprietà su auto il div del contenuto si espande, tutti i div si espandono, meno quelli delle due colonne.

la pagina incriminata è www.fixg.net/prova/

Codice CSS (non validato) --Ho omesso qualcosina per rendervi la lettura più semplice--

Codice:

html{
	height: 100%;
}
body{
	background-color: white;
	font-family: Arial, serif;
	font-size: 13px;
	text-align: center;
	margin-bottom: 0px;
	padding-bottom: 0px;
	height: auto;
}
.contenitore{
	width: 100%;
	height: 100%;
}
	.header{
		width: 850px;
		height: 150px;
		margin-left: auto;
		margin-right: auto;
		background: white url(header.png) no-repeat top left;
	}
	.basso{ /*footer*/
		width: 850px;
		height: 80px;
		clear: both;
		margin-left: auto;
		margin-right: auto;
		background:white url(bottom.png) no-repeat top left;
	}
	.contenitore_basso{
		width: 850px;
		height: 100%;
		text-align:center;
		margin-right: auto;
		margin-left: auto;
	}
		.colonna_sx{
			float: left;
			width: 172px;
			height: 100%;
			background: url(bord_sx.png) repeat-y left;
		}
		.contenuto{
			float: left;
			text-align: left;
			background: url(sf_cont.png) repeat top left;
			width: 460px;
			padding: 5px;
			height: 100%;
		}
		.colonna_dx{
			float:left;
			width: 178px;
			height: 100%;
			background: url(bord_dx.png) repeat-y right;
		}

E il codice HTML

Codice HTML:

<html>
	<head>
		<title>FixG.net</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="stile.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="contenitore">

			<div class="header">
				<div class="pulsanti">
				<a class="botn" href="index.php">home</a><a class="botn" href="index.php?c=leggi&tipo=news">novit&agrave;</a><a class="botn" href="index.php?c=leggi&tipo=offerte">offerte</a><a class="botn" href="index.php?c=contatti">contattaci</a>
				</div>
			</div>
			<div class="contenitore_basso">
			<div class="colonna_sx">

					<div class="titolo">
						Offerte
					</div>
									</div>
				
				<div class="contenuto">
										<a href="#">LINK></a>
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
					contenuto della colonna centraleLorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
									</div>
				<div class="colonna_dx">

						<div class="titolo">
							Novit&agrave;
						</div>
							<div class='cont_col_dx' style='margin-left: 0px; width: 166px;'><b>CIAO</b><br /> inserimento <img src=' prova2.jpg ' border=0 /> prova prova inserimento prova inserimentoprova inserimento prova inserimento</div>				</div>
			</div>

			<div class="basso"></div>
		</div>
	</body>
</html>

Quanto vorrei che mi aiutaste...grazie !

**silverseraph** · 09-07-2007, 21.07.27

E' normale, è l'effetto del float. Potresti racchiudere in un div container i 3 div (le colonne) e impostare un background a questo div. Poi per il div centrale imposterai il colore bianco e hai risolto.

**Leo91** · 09-07-2007, 22.50.04

Mmm...
Dici un background con la larghezza di 850px, che è la larghezza del colonnone che si ripete sull'asse x.
Potrebbe essere geniale, ma...il div che contiene queste tre colonne, l'height come deve essere impostato?

Ciao! (per il pvt? Hai la casella piena)

**funcool** · 10-07-2007, 07.26.03

Al div che contiene gli altri div non devi assegnare l'altezza.

**Leo91** · 10-07-2007, 15.42.55

Mattia e silver, vi farò una statua raffigurante voi due sorridenti!

GRAZIE!!!!

Discussione: Layout 3 colonne - Perchè le due colonne non vengono giu insieme al contenuto?

LinkBack

Strumenti discussione

Display

Layout 3 colonne - Perchè le due colonne non vengono giu insieme al contenuto?

Regole di scrittura