Schéma dvojstĺpcového layoutu stránky v CSS

Vytvorme dvojstĺpcový layout nasledujúceho vzhľadu:

Na začiatok vytvorme základnú štruktúru stránky:

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>

Teraz priradíme wrapperu štýly, zarovnáme ho do stredu obrazovky:

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

Nastavme teraz štýly pre header a footer:

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

Ako vidíte, nastavujeme headeru a footeru výšku. Robíme to preto, lebo v našej schéme nemajú žiadny obsah. Ak by obsah mali, výšku by sme blokom nenastavovali - vytvorila by sa podľa ich obsahu.

Všimnite si tiež, že im nenastavujeme šírku. Dôvod je ten, že header a footer sú blokové elementy a ich šírka bude automaticky rovná šírke wrappera.

Dajme im teraz padding, aby text nepriľnul k okrajom:

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

Prítomnosť paddingu však zle ovplyvní veľkosti blokov - stanú sa väčšími, ako je uvedené. Zmeňme správanie všetkých blokov tak, aby padding a okraje nerozširovali naše bloky:

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

Teraz potrebujeme umiestniť obsah a sidebar do jedného radu. Urobme to pomocou flexboxu:

css#container {
  display: flex;
}

Určme obsahu a sidebaru ich šírku. Pri tom súčet ich šírok musí byť rovný šírke wrappera:

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

Povedzme, že chceme vytvoriť odstup medzi sidebarom a obsahom. V tomto prípade treba sidebaru nastaviť margin. Pri tom nám bude musieť od niekoho ubrať šírku pre tento margin. Uberme od obsahu, tým pádom zmenšíme jeho šírku:

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

Dajme teraz pridať výšku, pretože naše elementy neobsahujú žiadny obsah. Stačí pridať výšku len jednému elementu, pretože drujý flex element sa prispôsobí výške (prečo?). Dajme nastaviť výšku obsahu:

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

Dajme pridať obsahu a sidebaru zvyšné štýly:

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

Hotovo, náš layout je pripravený. Zhromaždime celý kód dokopy:

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;
}