layout 3 colonne e height 100%

**[_Kilckk_]** · 14-08-2009, 13:41

ho un problema e sia cercando sul forum che su html.it e con google non sono riuscito a trovare una soluzione adeguata al mio problema, infatti la tecnica che suggeriscono è quella di usare un colore di sfondo e poi inserire il biango al contenuto, ma io voglio creare 3 colonne con colori diversi.

Ecco il file css:

codice:

html {
    margin:0;
	padding:0;
    height:100%;
}
	
body {
	font: 11px Arial,Verdana,Helvetica,sans-serif;
    margin:0;
    padding:0;
    height:100%;
}

#container_big {
	width: 802px;
	padding: 0px;
	margin: 0px;
	height:100%;
}

#container {
	float: left;
	position: relative;
	width: 802px;
	text-align: left;
	padding: 0px;
	border-right: solid #666 1px;
	border-left: solid #666 1px;
	border-bottom:solid #666 1px;
	height:100%;
}

#box1 {
	float:left;
	width:140px;
	background-color:#0066FF;
	height:100%;
}

#box2 {
	float:left;
	width:510px;
	padding-left:10px;
	background-color:#FF0000;
	border-right:1px #000000 solid;
	border-left:1px #000000 solid;
	border-bottom:1px #000000 solid;
	height:100%;
}

#box3 {
	float:left;
	width:140px;
	background-color:#00FF00;
	height:100%;
}

ed ecco la pagina html:

codice:

<body>
 
	<div align="center"> 
		<div id="container_big"> 
			<div id="container"> 
			
				<div id="box1">
					

Menu</p>

Menu</p>

Menu</p>

Menu</p>

Menu</p>

Menu</p>

Menu</p>
					

Menu</p>

Menu</p>

Menu</p>
				</div>
				<div id="box2">
					

Contenitore</p>

Contenitore</p>

Contenitore</p>

Contenitore</p>
					

Contenitore</p>

Contenitore</p>

Contenitore</p>
				</div>
				<div id="box3">
					

News</p>

News</p>

News</p>

News</p>
				</div>
			 
			</div>
		</div>
	</div>
 
</body>

ed ecco il disastroso risultato:

non riesco a capire il perchè height = 100% non funzioni, perchè non si adatta al #container??? eppure ho provato ad inserire height:100% in tutti i div ma nulla.

Non esiste un qualcosa di semplice per risolvere tutto questo???

Grazie.

**galex31785** · 15-08-2009, 01:34

Nella guida sui layout con i css si presentava un esempio che fa al caso tuo, se non erro si intitolava tipo: "layout alternativo con le posizioni assolute"...
In pratica inserisci un bgcolor per il container e per il content inserisci dei bordi solidi laterali dello "spessore" delle aree laterali, di questi bordi puoi poi scegliere anche il colore...
Ti allego la parte del css che ho utilizzato anche io nel mio layout:

div#content{border-style:solid; border-width:0 190px; border-color:#D91320 #cfcfcf #D91320 #D91320; padding:10px}

**[_Kilckk_]** · 15-08-2009, 21:06

si ho visto anche questa soluzione ma come le altre ai fin dei conti nessuna si può definire la soluzione definitiva... infatti con questa soluzione rimane il problema di non poter inserire un immagine di sfondo sulle due colonne.

L'unica soluzione è quella di creare un layout fisso e inserire le due colonne come sfondo del #container, così possiamo creare anche le linea di contorno per separa le tre colonne... questa sembra la soluzione migliore.

Discussione: layout 3 colonne e height 100%

Strumenti discussione

Ricerca discussione

Visualizza

layout 3 colonne e height 100%

Permessi di invio