Colonne "fino in fondo"

**alanPi** · 18-10-2005, 18:15

Salve ragazzi!
Ho bisogno di realizzare una pagina strutturata così:
-Riga di testa (A: 100px)
-Seconda riga (A: 50px)
-Parte centrale:
||||-Colonna sx (L: 160px)
||||-Contenuto (L: il rimanente spazio)
||||-Colonna dx (L: 160px)
-Footer (A: 20px)
Vorrei che le due righe e il footer fossero larghi quanto la finestra, e che la parte centrale fosse alta tutto lo spazio rimanente, riempiendo così lo schermo.
Ho scritto allora questo codice:

codice:

<html>
	<head>
		<link href='divisori.css' rel='stylesheet'>
		<title>Login</title>		
	</head>
	<BODY id="body-margin">
		<div id="container">
			
			<div id="header1">
			</div>
			
			<div id="header2">
			</div>
			
			<div id="content">
				<div id="left-col">
				</div>
				<div id="center-col">
				</div>
				<div id="right-col">
				</div>
			</div>
			
			<div id="footer">
			</div>
			
		</div>
	</body>
</html>

Mentre questo è il foglio di stile esterno:

codice:

#body-margin {
	margin: 0px;
	height: 100%;
	width: 100%;
}

#container {
	position: relative;
	height: 100%;
	width: 100%;
}

#footer {
	position: absolute;
	bottom: 0;
	height: 20px;
	width: 100%;
	background-color: blue;
}

#header1 {
	position: absolute;
	top: 0;
	height: 100px;
	width: 100%;
	background-color: green;
}

#header2 {
	position: absolute;
	top: 100;
	height: 50px;
	width: 100%;
	background-color: lightblue;
}

#content {
	position: absolute;
	top: 150px;
	bottom: 20px;
	width: 100%;
}

#left-col {
	position: absolute;
	left: 0px;
	height: 100%;
	width: 160px;
	background-color: yellow;
}

#right-col {
	position: absolute;
	right: 0px;
	height: 100%;
	width: 160px;
	background-color: aqua;
}

#center-col {
	position: absolute;
	top: 0;
	right: 160px;
	bottom: 0;
	left: 160px;
	height: 100%;
	background-color: red;
}

Se lo provate su Mozilla funziona benissimo, ma siccome IE è il più diffuso... sai com'è... lì non funziona...
Le tre colonne centrali mi vengono riempite di colore solo se ci sono contenuti, mentre vorrei che apparrissero anche se vuote.
Sapete dove devo correggere il codice??
Grazie per l'aiuto!

**alanPi** · 19-10-2005, 13:21

Up...
...aiuto...

**pierofix** · 19-10-2005, 13:23

Vai sul forum di XHTML&CSS e fai una ricerca con chiave "faux columns" o "colonne fittizie".

**alanPi** · 19-10-2005, 17:03

Mi dice che non trova nulla di attinente...
Un link diretto??

Grazie comunque

**pierofix** · 19-10-2005, 17:10

- www.alistapart.com/articles/fauxcolumns

**awd** · 19-10-2005, 22:50

faux columns? ammazza quato stai colto!

c'è anche in italiano eh? :rollo: http://www.html.it/layout_css/layout_css_20.htm
qui hai il principio di base, poi su pro.html.it trovi vari approfondimenti!

**alanPi** · 20-10-2005, 11:06

Conosco quell'idea, ma al mio problema non si applica, perchè le colonne sono due, una per lato, e il sito deve essere largo quanto lo schermo, quindi con una parte centrale elastica e DUE colonne di larghezza fissa.
Di nuovo grazie comunque!

**pierofix** · 20-10-2005, 11:07

Bè, se non erro Digital Web Magazine usa proprio delle colonne fittizie elastiche:

- www.digital-web.com

**thomas_anderson** · 20-10-2005, 11:59

Gianluca Troiani, "CSS. Guida completa" (Apogeo)
-----------> cap. 4 ---------------------------

**alanPi** · 20-10-2005, 14:39

@ Pierofix

Sì, ma solo una arriva fino in fondo, l'altra no. Ho bisogno che entrambe siano rigide e fino in fondo, e la parte centrale elastica ad occupare il rimanente spazio.

@thomas_anderson

Ok, la compro domani. Se non trovo soluzione neanche lì mi sa che dovrò stravolgere tutto il progetto, e solo "per colpa" di IE...

Grazie ad entrambi!

Discussione: Colonne "fino in fondo"

Strumenti discussione

Ricerca discussione

Visualizza

Colonne "fino in fondo"

Permessi di invio