18. Il posizionamento e la prima formattazione dei contenuti

Passiamo quindi a dare i primi stili ai contenuti:

  1. /* Contenuti */
  2. #content {
  3. float: left;
  4. margin: 0;
  5. width: 70%;
  6. }
  7. /* Elemento spaziatore */
  8. #gutter {
  9. padding: 1em 1em 0 1em;
  10. }

L'elemento #content è stato fatto flottare a sinistra e gli è stata assegnata una larghezza pari al 70% della superficie di visualizzazione. Abbiamo annullato i suoi margini per evitare che i browser assegnino dei valori extra al momento del floating. L'elemento #gutter funge da spaziatore tra i contenuti e la colonna laterale, tramite un padding destro pari ad 1em. Il padding superiore (1em) serve ad evitare problemi nel computo dei margini verticali tra tale elemento e i suoi figli di blocco.

Possiamo osservare i nostri progressi nel nostro documento XHTML e nel nostro documento HTML.