Membuat Layout 2 Kolom dan 3 Kolom Menggunakan CSS

Melanjutkan pembahasan saya di postingan sebelumnya tentang Membuat Layout Website Menggunakan CSS, postingan saya kali ini membahas tentang membuat layout 2 kolom dan layout 3 kolom menggunakan CSS.

Seperti yang kita tahu, pada umumnya, sebuah website setidaknya harus memiliki 2 kolom untuk bagian Main Content, satu sisi untuk konten utama website tersebut seperti artikel, halaman, dsb dan satunya lagi sebagai sidebar untuk penempatan widget dan iklan.

Untuk membuat Layout 2 kolom, sebelumnya kita harus ngetik coding HTML dahulu sebagai dasarnya yang bisa kalian sisipkan ke dalam Container layout website sobat seperti berikut :

Setelah itu, kita masuk pada proses ngetik coding CSSnya, kita akan membuat class content-kanan dan content-kiri berdampingan menggunakan sedikit coding CSS yang mudah.

Pada CSS dari class content-kiri, kita berikan float:left; agar objeknya menempel ke bagian kiri, lalu diberikan position:absolute;. Setelah itu pada content-kanan kita berikan position:absolute; juga agar mengisi bagian yang kosong dari content-kiri sehingga hasilnya mereka berdua dapat berdampingan.

Mudah bukan? Nah, untuk membuat 3 kolom, kalian tinggal tambahkan saja satu bagian lagi menjadi class content-kiri, content-tengah, dan content-kanan lalu kalian atur lebarnya sesuai kebutuhan kalian dan jangan lupa kasih float:left; untuk content-kiri dan position:absolute; untuk semua class.

Semoga bermanfaat! Kalau masih bingung, jangan sungkan-sungkan untuk bertanya di kolom komentar di bawah ya...