HTML + CSS pattern: layout a due colonne con intestazione e piedipagina centrato fluido

Questa pagina contiene le istruzioni per la realizzazione di un layout a due colonne con intestazione e piedipagina centrato, il tutto in modo orizzontalmente fluido, cioè la loro dimensione cambia al variare delle dimensioni dello schermo.

Esempio

Per realizzare un layout a due colonne con intestazione e piedipagina centrato, il tutto in modo orizzontalmente fluido, è opportuno prima di tutto creare le tre contenitori generici 'intestazione' e 'container' e 'piedipagina' con i marcatori div, e all'interno del container, creare due contenitori, il menù e il corpo. Il codice html per la creazione delle cinque sezioni è il seguente:

<div id="intestazione">intestazione</div>

<div id="container">

    <div id="colonna1">colonna sinistra</div>
    <div id="colonna2">colonna destra</div>    
    
</div>
    
<div id="piedipagina">piedipagina</div>

Mentre il seguente è il codice CSS:

div#intestazione{ position: relative; 
                  text-align: left; background-color:#FFCC00; 
                  width: 100%; height: 5%; 
                  margin-top:3%; margin-bottom:2%; 
                  border: 1px solid #000;}

div#conteiner{ position: relative; 
           text-align: left; 
           width: 100%; height: 400px;}

    div#colonna1{ position: absolute; 
                  text-align: left; background-color:#FFEEBB; 
                  width: 20%; height: 100%;
                  border: 1px solid #000;
                }
    
    div#colonna2{ position: absolute; 
                  text-align: left; background-color:#FFEEBB;
                  top: 0%; left: 20%;
                  width: 80%; height: 100%;
                  border: 1px solid #000;
                }

div#piedipagina{ position: relative; 
                 text-align: left; background-color:#FFCC00; 
                 width: 100%; height: 5%; 
                 margin-top:2%; margin-bottom:3%;
                 border: 1px solid #000;}

La proprietà position: è necessaria per la gestione della posizione di un elemento e può essere applicata a tutti gli elementi. Il valore absolute posiziona l'elemento in modo assoluto rispetto al box contenitore dell'elemento, nel nostro caso il box contenitore è il div container. Il valore relative posiziona l'elemento relativamente al suo box contenitore, nel nostro caso il box contenitore è la pagina stessa.

Copiando il codice sottostante nella <head> della propria pagina si puo avere un esempio diretto di quanto spiegato


<link type="text/css" rel="stylesheet" 
         href="https://www.asiconline.org/accessibilita/progetti/pattern/layout2ColonneInt.css" />

Un esempio completo di pagina html avente layout a due colonne con intestazione e piedipagina centrato orizzontalmente fluido si può avere con il seguente codice.

Esempio:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
  <head>
    <title>Gruppo Accessibilità dell'Associazione degli Informatici
    Catanesi: CSS pattern</title>
    <meta content="Accessibilità, ASIC, usabilità, web content" />
    <meta http-equiv="Content-Type" content="text/html" charset="ISO-8859-1" />
    <link type="text/css" rel="stylesheet" 
             href="https://www.asiconline.org/accessibilita/progetti/pattern/layout2ColonneInt.css" />

  </head>

<body>
<div id="intestazione">intestazione</div>

<div id="container">

    <div id="colonna1">colonna sinistra</div>
    <div id="colonna2">colonna destra</div>    
    
</div>
    
<div id="piedipagina">piedipagina</div>
</body>
</html>

Torna in cima