Layout a 3 colonne

**Sonikag** · 17-03-2005, 13:44

Vorrei un layout a 3 colonne con la colonna centrale fissa a 750px, mentre quelle laterali devono occupare lo spazio vuoto. avete esempi?

Sonia

**pentothaz** · 17-03-2005, 13:52

Dai un'occhiata qui

http://glish.com/css/
http://www.bluerobot.com/web/layouts/

ciao

**rookie** · 17-03-2005, 14:46

vai su www.cnai.info e vedi come sono fatte le tre colonne

**Sonikag** · 18-03-2005, 10:36

mmm no... non mi sono spiegata... non mi interessano 3 colonne di quel tipo...
L'html sarà lo stesso, ma cambierà il css.

Vorrei
Colonna sx: minimo 5px
Colonna centrale: 750px sempre al centro
colonna dx: minimo 5px

solo che colonna sx e colonna dx devono allargarsi in base alla risoluzione.

**Sonikag** · 18-03-2005, 12:35

Ho fatto una prova che non va

codice:

<html>
<head>
	<style type="text/css">
		#container {
			border: 1px solid gray;
			margin: 10px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
		}

		#banner {
			padding: 0;
			margin-bottom: 0;
			background-color: rgb(213, 219, 225);
		}

		#content {
			padding: 0;
			background-color: gray;
			width:750px;
		}

		#sidebar-a {
			float: left;
			width: auto;
			margin: 0;
			margin-right: 0;
			padding: 0;
			background-color: rgb(235, 235, 235);
		}

		#sidebar-b {
			float: right;
			width: auto;
			margin: 0;
			margin-left: 0;
			padding: 0;
			background-color: rgb(235, 235, 235);
		}

		#footer {
			clear: both;
			padding: 0;
			margin-top: 0;
			
			background-color: rgb(213, 219, 225);
		}
	</style>
</head>
<body>
	<div id="container">
		<div id="banner"></div>

		<div id="sidebar-a"></div>

		<div id="sidebar-b"></div>

  <div id="content">sdfsdfsdf</div>

		<div id="footer"></div>
	</div>
</body>
</html>

Ho provato anche a sostituire la width di sidebar a e sidebar b con 50% o 100% ma dopo mi manda ogni colonna a capo

**kaze** · 18-03-2005, 13:01

Hai provato ad aggiungere:
body, html{
text-align:center;
margin:auto;
}

**Sonikag** · 18-03-2005, 13:14

L'ho aggiunto ma non mi funziona nè se metto widht 50% nè 100% nè auto

**Sonikag** · 22-03-2005, 12:58

up

**carp** · 22-03-2005, 13:08

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">

<head>
<style type="text/css">
#container {
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
text-align: center;
}

#banner {
padding: 0;
margin-bottom: 0;
background-color: rgb(213, 219, 225);
}

#content {
padding: 0;
background-color: gray;
width:750px;
margin: 0 auto;
}

#sidebar-a {
float: left;
margin : auto;
padding: 0;
background-color: #fc3;
}

#sidebar-b {
float: right;
margin : auto;
padding: 0;
background-color: #333;
}

#footer {
clear: both;
padding: 0;
margin-top: 0;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="container">
<div id="banner"> </div>

<div id="sidebar-a">

prova</p></div>

<div id="sidebar-b">

prova</p> </div>

<div id="content"> sdfsdfsdf</div>

<div id="footer">

prova</p> </div>
</div>
</body>
</html>

**Sonikag** · 24-03-2005, 10:38

Grazie carp, ho provato ad adattarlo ma non va

Mi servirebbe una cosa simile (un esempio mi evita delle spiegazioni incmoprensibili)
http://pro.html.it/esempio/str/str.html

Però la colonna di sx la voglio di un colore diverso dalla colonna di dx.

Sonia

Discussione: Layout a 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

Layout a 3 colonne

prova questo

Permessi di invio