Kétszálas weboldal elrendezési séma CSS-ben

Készítsünk el egy kétszálas elrendezést a következő módon:

Először hozzuk létre az oldal alap szerkezetét:

html<div id="wrapper">
  <div id="header">
    fejléc
  </div>
  <div id="container">
    <div id="content">
      tartalom
    </div>
    <div id="sidebar">
      oldalsáv
    </div>
  </div>
  <div id="footer">
    lábléc
  </div>
</div>

Most adjunk stílusokat a wrapper-nek, középre igazítva a képernyőn:

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

Most adjunk stílusokat a fejlécnek és a láblécnek:

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

Amint látod, megadjuk a fejléc és lábléc magasságát. Ezt azért tesszük, mert a sémánkban nincs tartalmuk. Ha lenne tartalom, nem szabadna megadni a blokkok magasságát - a tartalmuk határozná meg.

Figyeld meg azt is, hogy nem adjuk meg a szélességüket. Ez azért van, mert a fejléc és a lábléc blokk elemek, és szélességük automatikusan megegyezik a wrapper szélességével.

Most adjunk nekik padding-et, hogy a szöveg ne érjen hozzá a szélekhez:

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

A padding jelenléte azonban rosszul hat a blokkok méreteire - nagyobbak lesznek, mint amennyi. Változtassuk meg az összes blokk viselkedését úgy, hogy a padding és a szegélyek ne növeljék a blokkjainkat:

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

Most egymás mellé kell helyeznünk a tartalmat és az oldalsávot. Tegyük ezt flexbox használatával:

css#container {
  display: flex;
}

Adjunk meg a tartalomnak és az oldalsávnak a szélességét. Eközben szélességük összege egyenlő kell legyen a wrapper szélességével:

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

Tegyük fel, hogy térközt akarunk létrehozni az oldalsáv és a tartalom között. Ebben az esetben az oldalsávnak margin-et kell beállítani. Ehhez le kell vennünk valakinek a szélességéből a margin miatt. Vegyük le a tartalomról, ennek megfelelően csökkentve a szélességét:

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

Most adjunk magasságot, mivel az elemeink nem tartalmaznak tartalmat. Elég csak egy elemnek megadni a magasságot, mert a másik flex elem magasságban igazodik (miért?). Adjunk meg magasságot a tartalomnak:

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

Adjunk hozzá a tartalomhoz és az oldalsávhoz a többi stílust:

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

Kész, az elrendezésünk kész. Gyűjtsük össze az összes kódot:

html<div id="wrapper">
  <div id="header">
    fejléc
  </div>
  <div id="container">
    <div id="sidebar">
      oldalsáv
    </div>
    <div id="content">
      tartalom
    </div>
  </div>
  <div id="footer">
    lábléc
  </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;
}