Creazione di un layout table-less con i Css

Autore: Luca Ruggiero | Tell a Friend Corso HTML Impara il linguaggio di marcatura per il Web. Corso CSS Web Design ed Accessibilità secondo il W3C! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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>

div.SX {
   float: left;
   width: 20%;
   /* IMPOSTAZIONE MARGINI, SFONDO, GIUSTIFICAZIONE, BORDI, ECC... */
}
div.SX {
   float: left;
   width: 80%;
   /* COME SOPRA! (Rif. Referenze ed elenco dei comandi del linguaggio Css) */
}