Layout Tiga Kolom dengan CSS Float

Membuat layout tiga kolom pada artikel sebenarnya tidak sesulit yang Anda kira. Dengan CSS Float, elemen yang tadinya tersusun dari atas ke bawah bisa dibuat menyamping.
Kita mulai dengan menerapkan elemen-elemen <div> seperti ini:

Sebelum CSS Float

<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 kode 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 kode yang sangat pendek untuk menciptakan layout artikel yang luar biasa ganteng. Ada beberapa hal yang harus Saya tekankan di sini:

• Pertama, Saya menggunakan satuan persentase. Tujuannya agar layout kolom bisa menyesuaikan diri dengan lebar artikel. Anda bisa saja menggunakan satuan piksel untuk nilai yang lebih akurat, namun risiko penerapan satuan piksel adalah Anda harus menyesuaikan ukurannya sendiri. Dan yang jelas, satuan piksel dalam pengukuran itu tidak responsif untuk beberapa kasus, contohnya pembuatan layout ini:
  
  

  

  Detail Ukuran

  
  
  
• Kedua, Saya menerapkan elemen <div style='clear:both;'></div> pada bagian akhir kolom. Ini bertujuan untuk memutuskan aliran 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 saat itu terjadi, maka elemen-elemen yang ada di bawahnya akan memiliki kecenderungan untuk menutupi daerah yang kosong. Meskipun Anda telah menentukan lebar yang sama persis dengan elemen induk (berharap agar tidak ada lagi ruang kosong yang tersisa), namun sifat elemen yang akan cenderung mengikuti aliran float tidak akan pernah bisa hilang, seperti halnya udara atau zat cair.
  Dengan menerapkan deklarasi clear:both pada akhir kolom, maka aliran float akan terputus, dan Anda bisa mulai menulis artikel seperti biasa mulai dari sini:
  
  

  

  Menerapkan deklarasi clear:both;

  
  

Untuk sementara, Saya sarankan agar 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 bisa mengurangi nilai margin sedikit demi sedikit untuk membuat kerenggangan "khusus untuk Internet Explorer".

Lihat Demo