Creazione di un layout senza tabelle

I CSS mettono a disposizione un ottimo sistema di impaginazione e costruzione di layout, potente almeno quanto le tabelle standard dell'Html, col vantaggio di alleggerire il codice (e di conseguenza il caricamento della pagina), e di rendere una pagina accessibile ai browser per invalidi, quindi con impulsi vocali e sensibili al tatto, ecc...

Vediamo un esempio in cui costruiamo un layout composto da una colonna (tipo menu) sulla sinistra, ed un'area principale sulla destra:

<div class="SX">
  MENU...
</div>
<div class="DX">
  PRINCIPALE...
</div>

A questo banale listato Html aggiungiamo questo foglio di stile:

div.SX {
   float: left;
   width: 20%;
/* IMPOSTAZIONE MARGINI, SFONDO, GIUSTIFICAZIONE, BORDI, ECC... */
}
div.SX {
   float: left;
   width: 80%;
/* COME SOPRA! */
}

La proprietà float impostata sul valore left non fa altro che impedire ad un layer di tipo <div> di andare a capo alla chiusura, come nativamente si comporta e, mantenendolo sulla stessa riga, permette la creazione di layout in forma tabellare.

Autore: Luca Ruggiero