Layout Tiga Kolom Dengan Css Float

Membuat layout tiga kolom pada artikel bahu-membahu tidak sesulit yang Anda kira. Dengan CSS Float, elemen yang tadinya tersusun dari atas ke bawah dapat dibentuk menyamping.
Kita mulai dengan menerapkan elemen-elemen <div> menyerupai ini:

<div id='kolom-3'>      <div class='kolom'>         Konten di sini...     </div>      <div class='kolom'>         Konten di sini...     </div>      <div class='kolom'>         Konten di sini...     </div>      <div style='clear:both;'></div>  </div>

Kemudian kita terapkan isyarat CSS dengan menyesuaikan atribut kelas dan ID pada elemen yang kita buat:

#kolom-3 {   width:100%;   margin:15px 0 15px; }  .kolom {   width:30%;   margin:0% 1.6666667%;   float:left;   display:inline;   word-wrap:break-word; /* fix for long text breaking sidebar float in IE */   overflow:hidden;      /* fix for long non-text content breaking IE sidebar float */ }

Sebuah isyarat yang sangat pendek untuk membuat layout artikel yang luar biasa ganteng. Ada beberapa hal yang harus Saya tekankan di sini:

Pertama, Saya memakai satuan persentase. Tujuannya biar layout kolom dapat mengikuti keadaan dengan lebar artikel. Anda dapat saja memakai satuan piksel untuk nilai yang lebih akurat, namun risiko penerapan satuan piksel yakni Anda harus menyesuaikan ukurannya sendiri. Dan yang jelas, satuan piksel dalam pengukuran itu tidak responsif untuk beberapa kasus, misalnya pembuatan layout ini:

Detail Ukuran
Kedua, Saya menerapkan elemen <div style='clear:both;'></div> pada bab simpulan kolom. Ini bertujuan untuk tetapkan anutan float yang terjadi.
Mari kita lihat ilustrasinya lebih dekat:

Aliran elemen pada CSS Float

Saat Anda menerapkan CSS Float pada elemen, maka elemen tersebut akan mengalir ke arah kiri (float:left) atau ke kanan (float:right). Dan ketika itu terjadi, maka elemen-elemen yang ada di bawahnya akan mempunyai kecenderungan untuk menutupi tempat yang kosong. Meskipun Anda telah memilih lebar yang sama persis dengan elemen induk (berharap biar tidak ada lagi ruang kosong yang tersisa), namun sifat elemen yang akan cenderung mengikuti anutan float tidak akan pernah dapat hilang, menyerupai halnya udara atau zat cair.
Dengan menerapkan deklarasi clear:both pada simpulan kolom, maka anutan float akan terputus, dan Anda dapat mulai menulis artikel menyerupai biasa mulai dari sini:

Menerapkan deklarasi clear:both;

Untuk sementara, Saya sarankan biar Anda tidak mendeklarasikan padding dan border pada layout ini. Jika Anda akan menerapkannya, maka Anda harus menyesuaikan ukurannya kembali, dengan mempertimbangkan logika Box-Model pada browser-browser non-IE, yang secara otomatis akan menambah lebar/tinggi elemen sesuai dengan penambahan ketebalan border/padding. IE agak rewel untuk yang satu ini, jadi Anda dapat mengurangi nilai margin bertahap untuk membuat kerenggangan "khusus untuk Internet Explorer".

Lihat Demo

Sumber https://www.dte.web.id/