Impaginare un sito web con Div e CSS - seconda parte

Nella prima parte si è visto come impostare la struttura di un sito creando un layout a due colonne e risolvendo il problema dell'altezza dei div.
La seconda parte dell'articolo invece si focalizza su un layout a tre colonne e su come modificare la larghezza dell'intero sito.

Layout a tre colonne

Per strutturare un sito html a tre colonne occorre aggiungere un div che sarà la colonna di destra, al quale si attribuisce un valore di float: right. Ecco il codice completo, che può essere usato come base la creazione di altri siti.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
    <title>Layout a 3 colonne - www.Dev-oClock.com</title>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		<style type="text/css">
			html, body
			{
				margin: 0px;
				padding: 0px;				
				text-align: center;
				background-color: #E3E3FF;				
			}
			#PageWrapper
			{
				width: 1024px;		/* larghezza del sito; impostare a 100% per un sito largo tutta la pagina del browser */
				margin: 0 auto;
				text-align: left;
			}
			#Header
			{
				text-align: center;
				background-color: #000000;
				color: White;
				padding: 20px;
			}						
			#Menu-Content-Wrap
			{								
				overflow: hidden;			/* 1/3 necessario per avere le colonne laterali della stessa altezza di quella centrale */
			}
			#Menu-Left
			{
				float: left;
				width: 180px;
				height: 100%;
				background-color: #B8B8FF;
				text-align: center;
				
				padding-bottom: 5000px;		/* 2/3 necessario per avere le colonne laterali della stessa altezza di quella centrale */
				margin-bottom: -5000px;		/* 2/3 necessario per avere le colonne laterali della stessa altezza di quella centrale */
			}
			#MainContent 
			{
				float: left;
				height: 100%;				
				padding: 5px;
				min-height: 500px;			/* altezza minima del sito */
			}
			#Menu-Right
			{
				float: right;
				width: 180px;
				text-align: center;
				background-color: #B8B8FF;	
				height: 100%;
				
				padding-bottom: 5000px;		/* 3/3 necessario per avere le colonne laterali della stessa altezza di quella centrale */
				margin-bottom: -5000px;		/* 3/3 necessario per avere le colonne laterali della stessa altezza di quella centrale */
			}
			#Footer 
			{
				clear: both;	/* manda a capo questo div */
				background-color: #000000;
				color: white;
				text-align: center;
				padding: 10px;
			}
			
		</style>
	</head>
	<body>
		<!-- Contenitore dell'intero sito -->
		<div id="PageWrapper">
			<div id="Header">Intestazione</div>
			<!-- Contenitore dei menu laterali e del contenuto centrale -->
			<div id="Menu-Content-Wrap">
				<div id="Menu-Left">
					<p>Menu sinistra</p>
					<ul>
						<li>Menu Item 1</li>
						<li>Menu Item 2</li>
						<li>Menu Item 3</li>
						<li>Menu Item 4</li>
					</ul>
				</div>
				<div id="MainContent">
					<p>Contenuto pagina</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>Layout a tre colonne</p>
					<p>--- <a href="http://www.dev-oclock.com">Dev-oClock.com</a> ---</p>
				</div>
				<div id="Menu-Right">					
					<p>Menu destra</p>
				</div>
			</div>
			<div id="Footer">Footer</div>
		</div>
	</body>
</html>

Questo è il risultato:

Impostare la larghezza del sito

Il layout creato in precedenza ha una larghezza fissa di 1024 pixel ed è posizionato al centro della pagina.
Per avere un sito largo sempre come l'intera pagina del browser è sufficiente impostare questo valore Css al div che raggruppa tutto il sito:

#PageWrapper
{
	width: 100%;
}

In tal caso è consigliabile impostare in percentuale anziché in pixel anche la larghezza delle varie colonne dei menu laterali e del contenuto centrale.

Autore: Sergio Roberto Boarina