Cara Membuat Layout 3 Kolom dengan CSS

Pelajari cara membuat layout 3 kolom dengan HTML dan CSS untuk tampilan web yang rapi dan responsif.

Kenapa Harus Tahu Cara Bikin Layout 3 Kolom?

Kalau anda lagi ngulik front-end atau punya blog berbasis e-commerce, tampilan itu segalanya. Salah satu struktur yang paling sering dipakai adalah layout 3 kolom. Kenapa? Karena fleksibel: bisa buat navigasi di kiri, konten di tengah, dan tambahan info di kanan.

 

Struktur Dasar HTML Layout 3 Kolom

Sebelum masuk ke CSS, pastikan anda punya struktur HTML yang rapi. Ini dia contohnya:

<div id="container">
  <div id="header">Header</div>
  <div id="sidebar_left">Sidebar Kiri</div>
  <div id="center">Konten Utama</div>
  <div id="sidebar_right">Sidebar Kanan</div>
  <div id="footer">Footer</div>
</div>

 

Kode CSS untuk Mengatur Layout

Setelah HTML-nya siap, waktunya styling! Ini dia contoh CSS-nya:

body {
  font-family: Verdana;
  margin: 0;
  padding: 0;
}

#container {
  width: 900px;
  margin: auto;
  border: 1px solid #000;
  background: #000;
}

#header, #footer {
  height: 100px;
  background: #f00;
  border: 1px solid #000;
}

#sidebar_left, #sidebar_right {
  float: left;
  width: 170px;
  margin: 10px 0;
  padding: 10px;
  background: #0f0;
  border: 1px solid #000;
}

#center {
  float: left;
  width: 500px;
  margin: 10px;
  padding: 10px;
  background: #33f;
  border: 1px solid #000;
}

Pastikan anda menambahkan clear: both; di footer agar semua elemen sebelumnya selesai dirender dengan benar.

 

Tips Biar Layout Makin Rapi

• Gunakan box-sizing: border-box; supaya padding nggak bikin layout berantakan.
• Coba tambahkan media query kalau ingin bikin layout responsif.
• Kalau mau praktis, anda bisa pakai Flexbox atau Grid, tapi layout float kayak gini tetap berguna buat belajar dasar.

 

Kesimpulan

Layout 3 kolom itu salah satu pondasi dalam desain web. Dengan tahu cara bikin dari nol pakai HTML dan CSS, anda bisa lebih paham gimana browser bekerja dan lebih leluasa ngatur tampilan website anda sendiri.

 

Ayo Coba Sendiri!

Udah siap ngulik? Langsung aja cobain di proyek anda. Kalau bingung, tulis aja di kolom komentar. Jangan lupa share artikel ini ke temen anda yang juga lagi belajar web design!