HTML + CSS pattern: layout a due colonne centrato fluido

Questa pagina contiene le istruzioni per la realizzazione di un layout a due colonne centrato orizzontalmente fluido, cioè la loro dimensione cambia al variare delle dimensioni dello schermo.

Esempio

Per realizzare un layout a due colonne è opportuno prima di tutto creare le due contenitori generici colonna1 e colonna2 con i marcatori div. Il codice html per la creazione delle due sezioni è il seguente:

<div class="colonna1">colonna sinistra</div>
<div class="colonna2">colonna destra</div>

Mentre il seguente è il codice CSS in modo che il layout sia centrato e orizzontalmente fluido:

div {border: 1px solid #000;}

div.colonna1{background-color:#FFEEBB;
            position: absolute;
            top:10%; left:10%; bottom:10%;
            width:20%; height:400px;}
    
div.colonna2{background-color:#FFCC00;
            position: absolute;
            top:10%; left: 30%; right:10%; bottom:10%;
            width:60%; height:400px;}

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 è la pagina stessa.

All'interno del body settiamo il valore del margine destro e del margine sinistro a 10% in modo da centrare il nostro layout.

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/layoutColonne.css" />

Un esempio completo di pagina avente layout con due colonne 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/layoutColonne.css" />
  </head>

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

Torna in cima