CSS: colonne di uguale altezza in un layout fluido

  • CSS
  • Gabriele Romanato

Per creare l'illusione delle colonne di uguale altezza in un layout fluido (ossia che usa le percentuali per la larghezza degli elementi) è necessario ricorrere alle immagini di sfondo. Tali immagini di sfondo dovranno avere una larghezza molto elevata in modo da tenere conto delle possibili risoluzioni di schermo del layout. Vediamo insieme i dettagli.

Abbiamo questa semplice struttura HTML:


<div id="site">


    <div id="branding"><h1>Nome sito</h1></div>
    
    <div id="content">
    
        <div id="main"></div>
        <div id="content-sub"></div>
        
   </div>
   
   <div id="site-info">Footer</div>


</div>

L'immagine di sfondo andrà posizionata sull'elemento content e avrà una larghezza di 2000 pixel in modo da prevedere la massima risoluzione di schermo. Il valore per il posizionamento dell'immagine lungo l'asse orizzontale (x) della proprietà background-position dovrà essere pari alla larghezza dell'elemento a cui viene applicata meno la larghezza della colonna su cui dovrà comparire:


body {
    margin: 0;
    padding: 2em 0;
    font: 100% Arial, sans-serif;
    background: #ccc;
}

#site {
	width: 70%;
	margin: 0 auto;
	background: #fff;
	color: #333;
}

#branding {
	padding: 3em;
	text-align: center;
	background: #000;
	color: #fff;
}

#branding h1 {margin: 0;}

#content {
	height: 100%;
	overflow: hidden;
	background: url(bg-col.gif) repeat-y 75% 0;
}

#main {
	float: left;
	width: 75%;
}

#content-sub {
	float: right;
	width: 25%;
}

p {padding: 0 1em; line-height: 1.4;}

#site-info {
	padding: 3em;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background: #000;
	clear: both;
}

Abbiamo quindi 100% - 25% = 75%, ossia la larghezza totale meno la larghezza della colonna (content-sub). 75% sarà il valore da usare nel posizionamento dell'immagine di sfondo tramite l'asse orizzontale della proprietà background-position. Inoltre l'immagine sarà ripetuta in verticale per coprire i contenuti della colonna.

Potete visionare l'esempio finale in questa pagina.

Torna su