Schema di layout a due colonne per siti web in CSS

Creiamo un layout a due colonne del seguente tipo:

Per iniziare, creiamo la struttura principale della pagina:

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="content">
      content
    </div>
    <div id="sidebar">
      sidebar
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

Ora applichiamo gli stili al wrapper, allineandolo al centro dello schermo:

css#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}

Definiamo ora gli stili per l'header e il footer:

css#header {
  height: 200px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  border: 1px solid black;
}

Come puoi vedere, impostiamo l'altezza per l'header e il footer perché nel nostro schema non hanno contenuto. Se ci fosse contenuto, non bisognerebbe impostare l'altezza dei blocchi - si formerebbe automaticamente in base al loro contenuto.

Nota anche che non impostiamo la loro larghezza. Il fatto è che header e footer sono elementi di blocco e la loro larghezza sarà automaticamente uguale a quella del wrapper.

Ora aggiungiamo del padding, in modo che il testo non aderisca ai bordi:

css#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

Tuttavia, la presenza del padding influenzerà negativamente le dimensioni dei blocchi - diventeranno più grandi di quanto specificato. Cambiamo il comportamento di tutti i blocchi in modo che padding e bordi non espandano i nostri blocchi:

css* {
  box-sizing: border-box;
}

Ora dobbiamo mettere il contenuto e la sidebar su una sola riga. Facciamolo usando i flexbox:

css#container {
  display: flex;
}

Specifichiamo la larghezza per il contenuto e la sidebar. La somma delle loro larghezze deve essere uguale alla larghezza del wrapper:

css#content {
  width: 800px;
}
#sidebar {
  width: 200px;
}

Supponiamo di voler creare una spaziatura tra la sidebar e il contenuto. In questo caso, è necessario applicare un margin alla sidebar. Dovremo quindi sottrarre la larghezza per questo margin da qualcuno. Prendiamola dal contenuto, riducendo di conseguenza la sua larghezza:

css#content {
  width: 780px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

Ora aggiungiamo l'altezza, poiché i nostri elementi non contengono contenuto. È sufficiente aggiungere l'altezza solo a un elemento, poiché il secondo elemento flex si adatterà in altezza (perché?). Assegniamo l'altezza al contenuto:

css#content {
  width: 780px;
  height: 700px;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
}

Aggiungiamo gli stili rimanenti al contenuto e alla sidebar:

css#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}

Fatto, il nostro layout è pronto. Mettiamo insieme tutto il codice:

html<div id="wrapper">
  <div id="header">
    header
  </div>
  <div id="container">
    <div id="sidebar">
      sidebar
    </div>
    <div id="content">
      content
    </div>
  </div>
  <div id="footer">
    footer
  </div>
</div>

css* {
  box-sizing: border-box;
}

#wrapper {
  width: 1000px;
  margin: 30px auto;
  border: 1px solid black;
}
#header {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}
#container {
  display: flex;
}
#content {
  width: 780px;
  height: 700px;
  padding: 20px;
  border: 1px solid black;
}
#sidebar {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}
#footer {
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}