Come per la versione analoga con i float, anche in questo caso è consigliato l’uso di un container aggiuntivo. Ecco quindi il codice HTML base:

<body>
  <div id=”container”>
    <div id=”container2″>
        <div id=”header”></div>
        <div id=”content”></div>
        <div id=”extra”></div>
        <div id=”navigation”></div>
        <div id=”footer”></div>
    </div>
  </div>
</body>

Le regole CSS da aggiungere sono semplici:

div#container{position: relative;
background:url(3rightcol.jpg) repeat-y top right
}

div#container2{background: url(3leftcol.jpg) repeat-y top left}

Anche qui basta semplicemente scegliere il tipo di layout. Ho preparato la versione con layout fisso.

Scarica il file zip di esempio di questa lezione
32 / 41

Rompere la simmetria