CARA MEMBUAT LAYOUT 2 KOLOM DENGAN CSS

Membuat sebuah website memerlukan keterampilan dalam mengatur layout agar terlihat rapi dan profesional. Salah satu cara mengatur halaman web adalah dengan membuat layout 2 kolom menggunakan CSS. Layout 2 kolom ini memberikan tampilan yang rapi dan organisir untuk konten website kamu. Dalam artikel ini, saya akan memberikan panduan langkah-demi-langkah bagaimana cara membuat layout 2 kolom dengan CSS.

Membuat Struktur HTML

Kita akan mulai dengan membuat struktur HTML terlebih dahulu. Dalam contoh ini, kita akan membuat dua div: satu untuk kolom sebelah kiri dan satunya lagi untuk kolom sebelah kanan.

<div id="kolom-kiri"></div>
<div id="kolom-kanan"></div>

Setiap div akan menjadi kolom pada layout kita nanti.

Menata Kolom dengan CSS

Sekarang, kita akan menggunakan CSS untuk menata dua kolom tersebut. CSS akan digunakan untuk mengendalikan lebar dan posisi dari masing-masing kolom.

#kolom-kiri {
    float: left;
    width: 50%;
}

#kolom-kanan {
    float: right;
    width: 50%;
}

Dengan kode CSS di atas, kita telah menetapkan bahwa kolom kiri akan terletak di sebelah kiri dan memiliki lebar 50% dari keseluruhan halaman web. Sementara itu, kolom kanan akan berada di bagian kanan dengan lebar yang sama.

Mengatur Margin

Untuk memberikan jarak antara dua kolom, kamu bisa menambahkan margin pada CSS.

#kolom-kiri {
    float: left;
    width: 45%;
    margin-right: 5%;
}

#kolom-kanan {
    float: right;
    width: 50%;
}

Dengan tambahan kode CSS di atas, sekarang akan ada jarak 5% antara dua kolom.

Mengatur Konten dalam Kolom

Kemudian, kamu bisa mengisi kolom-kolom tersebut dengan konten sesuai kebutuhan kamu. Kamu bisa memasukkan teks, gambar, atau elemen HTML lainnya ke dalam div tersebut.

<div id="kolom-kiri">
    <p>Ini adalah konten untuk kolom kiri.</p>
</div>
<div id="kolom-kanan">
    <p>Ini adalah konten untuk kolom kanan.</p>
</div>

Dan itulah cara membuat layout 2 kolom dengan CSS. Dengan memahami konsep ini, kamu bisa lebih leluasa dalam menata layout website kamu. Selamat mencoba!