Layout misto a due colonne

Introduzione In un precedente articolo, ti ho spiegato come affiancare elementi blocco con la proprietà CSS3 column. Voglio ricollegarmi a […]
Layout misto a due colonne

Introduzione

In un precedente articolo, ti ho spiegato come affiancare elementi blocco con la proprietà CSS3 column. Voglio ricollegarmi a quella proprietà, molto comoda ma ancora poco supportata per analizzare un metodo un pò più old school ma sicuramente piu retro-compatibile per realizzare un layout multicolonna con larghezze miste.
Era da un pò di tempo che avevo in mente un articolo del genere. E’ sicuramente un argomento sul quale ogni webdesigner prima o poi deve scontrarsi. Affiancare elementi html che hanno valori misti di width comporta sempre una serie di problematiche. E’ abbastanza “semplice” affiancare due elementi se entrambi hanno la width espressa in pixel o in percentuale ma il discorso si complica in presenza di layout misti. Tralascerò infatti tutta la prima parte che si riduce ad un semplice float di elementi per passare a layout un pò più complessi.

Le varianti

Dovendo parlare di layout a due colonne, di varianti credo proprio ce ne possano essere al massimo 2. Il primo con sidebar in pixel sulla sinistra e il contenuto principale sulla destra, il secondo al contrario. Li voglio affrontare entrambi, poichè in base a come scriviamo l’html può cambiare o meno il nostro CSS. Ragionando sul fatto che di solito in sidebar ci vanno i contenuti secondari, come menu banner link etc, converrebbe nella stesura dell’html inserire la sidebar immediatamente dopo al contenuto pricipale sia per motivi SEO che per gli screenreader che, seguendo l’ordine naturale del codice, leggono immediatamente ciò che di importante c’è nella pagina per poi passare al resto.

I caso: colonna a larghezza fissa SX + contenuto liquido a DX

Come ti ho spiegato poco fa c’è modo e modo di scrivere un codice html, partiamo da quello più semplice e immediato anche se strutturalmente errato in quanto inseriamo la sidebar come primo elemento nel codice e i contenuti come secondo. Analizziamo subito la struttura HTML:

<div id="corpo">
   <div id="sidebar">
        <p>...</p>
   </div>
   <div id="main">
       <p>...<p>
   </div>
</div>

Dato che non conosciamo a priori la larghezza totale a nostra disposizione, utilizzeremo un metodo alternativo per affiancare i due elementi; al primo elemento verrà applicato il float dato che avrà una larghezza impostata in pixel, mentre il secondo essendo liquido sarà affiancato al primo impostando solo il margine sinistro. Dato che il primo elemento che viene inserito nel codice deve essere flottante affichè tutto funzioni, e dato che all’elemento liquido non può essere applicato il float per essere affiancato poiche non conosciamo la larghezza finale, l’elemento con larghezza fissa e quindi flottante deve essere il primo elemento che compare nel codice html ( ma anche no! 😉 ).

#corpo{
    overflow:hidden; /*Per contenere i due float*/
    padding:20px;
    background:green;
}
#sidebar{
    float:left;
    width:200px;
    padding:20px;
    background:red;
}
#main{
    margin-left:240px;
    padding:20px;
    background:yellow;
}

Affiniamo il codice!

Abbiamo appena affiancato due elementi con larghezze espresse in due unità di misura differenti utilizzando un codice html non proprio corretto. Vediamo invece come gestire il css di un codice html corretto, in maniera tale che la sidebar venga inserita nel codice immediatamente dopo i contenuti principali.

<div id="corpo">
    <div id="main">
        <div id="content">
            <p>...</p>
        </div>
    </div>
    <div id="sidebar">
        <p>...</p>
    </div>
</div>

Per quanto riguarda l’html nulla di più semplice, basta invertire i due elementi nel codice e aggiungere un ulteriore contenitore che racchiude i contenuti principali (#content). Nulla verrà modificato visivamente, la sidebar continuerà a rimanere a sinistra mentre i contenuti principali sulla destra. Per attuare questa modifica bisogna rivedere il ragionamento fatto poc’anzi. Ti scrivo subito la modifica al css da effettuare (Padding colori etc li inserisco per schematizzare meglio il tutto):

#corpo{
  overflow:hidden;
  background:green;
  padding:20px;
}

#main {
  float:right;
  width:100%;
  position:relative;
  z-index:5;
  right:240px;
  margin-right:-240px;
}

#main #content {
  margin-left:240px;
  background:yellow;
  padding:20px;
}

#sidebar {
  float:left;
  width:200px;
  position:relative;
  z-index:10;
  background:red;
  padding:20px;
}

Lasciamo perdere il div#corpo che fa solo da contenitore per il layout e passiamo subito al dunque. Nel codice il div#main si trova prima, facciamolo quindi flottare a destra con larghezza 100%. Il div in questione occuperà tutto lo spazio a disposizione facendo cadere a capo la sidebar. Sposiamolo quindi verso destra di quanto serve affiche la sidebar con tutti i suoi margini bordi e padding riesca a posizionarsi; per farlo, impostiamo il suo margine destro negativo a -240px. Li abbiamo di nuovo affiancati ma non è ancora finita. Come puoi ben notare i contenuti sporgono verso destra di 240px, bisogna farli rientrare e per farlo settiamo il suo position su relative e impostiamo il suo valore di right pari al valore del margine negativo per compensare il tutto. Occupando #main tutto lo spazio a disposizione copre però i contenuti di sidebar. Attribuiamo anche #sidebar un position relative e uno z-index maggiore di #main cosi che avrà la meglio su quest’ultimo e contenuti e link saranno cliccabili. Ci siamo quasi, adesso i due elementi sono sovrapposti con la sidebar su un livello superiore. Ecco che entra in gioco #content, che contiene tutti i contenuti principali del sito. E’ a quest’ultimo che imposteremo un margin-left pari a 240px (proprio il valore dell’outherWidth di sidebar) ed eventuali padding e colori di sfondo. Adesso è perfetto, i due elementi sono affiancati, il nostro codice è ben strutturato e tutto funziona correttamente.

II caso: contenuto liquido a SX + colonna a larghezza fissa DX

Se graficamente volessimo il contrario? Niente di più facile. Mantenendo inalterato il codice html, basterà solo invertire le proprietà di seguito elencate:

#main {
  float:left;
  margin-left:-240px;
  left:240px
}

#main #content {
  margin-right:240px;
}

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github