Schemat układu dwukolumnowego strony w CSS

Stwórzmy układ dwukolumnowy następującego rodzaju:

Na początek stwórzmy główną strukturę strony:

html<div id="wrapper">
  <div id="header">
    nagłówek
  </div>
  <div id="container">
    <div id="content">
      treść
    </div>
    <div id="sidebar">
      panel boczny
    </div>
  </div>
  <div id="footer">
    stopka
  </div>
</div>

Teraz przypiszmy style dla kontenera, wyrównując go do środka ekranu:

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

Ustawmy teraz style dla nagłówka i stopki:

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

Jak widzisz, ustawiamy nagłówkowi i stopce wysokość. Robimy tak, ponieważ w naszym schemacie nie mają one zawartości. W przypadku posiadania zawartości nie należy ustawiać wysokości blokom - będzie się ona kształtować na podstawie ich zawartości.

Zwróć także uwagę na to, że nie ustawiamy im szerokości. Chodzi o to, że nagłówek i stopka to elementy blokowe i ich szerokość będzie automatycznie równa szerokości kontenera.

Ustawmy im teraz padding, aby tekst nie przylegał do krawędzi:

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

Obecność paddingu, jednak, źle wpłynie na rozmiary bloków - staną się one większe, niż określono. Zmieńmy zachowanie wszystkich bloków tak, aby padding i obramowania nie powiększały naszych bloków:

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

Teraz musimy umieścić treść i panel boczny w jednym rzędzie. Zróbmy to za pomocą flexboxów:

css#container {
  display: flex;
}

Określmy treści i panelowi bocznemu ich szerokość. Przy tym suma ich szerokości powinna być równa szerokości kontenera:

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

Załóżmy, że chcemy zrobić odstęp między panelem bocznym a treścią. W tym przypadku panelowi bocznemu trzeba ustawić margin. Przy tym będziemy musieli od kogoś odjąć szerokość dla tego marginu. Odejmijmy od treści, odpowiednio zmniejszając jej szerokość:

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

Dodajmy teraz wysokość, ponieważ nasze elementy nie zawierają zawartości. Wystarczy dodać wysokość tylko jednemu elementowi, ponieważ drugi element flex dostosuje się wysokością (dlaczego?). Ustawmy wysokość treści:

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

Dodajmy treści i panelowi bocznemu pozostałe style:

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

Wszystko, nasz układ jest gotowy. Zbierzmy cały kod razem:

html<div id="wrapper">
  <div id="header">
    nagłówek
  </div>
  <div id="container">
    <div id="sidebar">
      panel boczny
    </div>
    <div id="content">
      treść
    </div>
  </div>
  <div id="footer">
    stopka
  </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;
}