Questo tipo di layout è un po' particolare. Iniziamo con il dire che tutte
le sezioni di testo di un sito con layout elastico devono essere dimensionate
relativamente, così come le eventuali largezze degli elementi. Per un
layout monolitico, il contenitore principale viene dimensionato in em così
da consentire, modificando la larghezza del carattere tramite le opzioni del browser,
di ottenere una sorta di effetto zoom. Ecco il codice CSS:
/*stili per il layout elastico*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{width: 60em;margin: 0 auto;text-align: left;
border-left: 2px solid #36c;border-right: 2px solid #36c}
/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{text-align:center;padding: 0.5em;
background-color: #69c; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{background-color:#9cf}
div#content{padding: 1em}
E l'esempio realizzato di layout a colonna singola
elastico. Scarica l'esempio. Anche qui, il mio consiglio è di fare le prove di stampa.