Posting Layout Tiga Kolom dengan CSS Float

Hanya dengan CSS Float , kita bisa membuat artikel dengan layout tiga kolom. Jadi susunan artikel atau posting blog (elemen) yang tadinya te...

Hanya dengan CSS Float, kita bisa membuat artikel dengan layout tiga kolom. Jadi susunan artikel atau posting blog (elemen) yang tadinya tersusun dari atas ke bawah kini bisa dibuat menyamping. Sebelumnya sudah ada artikel yang saya buat serupa ini, silahkan kunjungi:Halaman Blogger Seperti Majalah atau Koran.
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 */
}

Kode tersebut sudah cukup untuk menciptakan layout artikel tiga kolom. Ada beberapa hal yang harus dicatat:

• Pertama, gunakan satuan persentase bukan piksel (px). 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, terapkan elemen <div style='clear:both;'></div> pada bagian akhir kolom. Tujuannya 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). Oleh karena itu 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 cenderung mengikuti aliran float tidak akan pernah bisa hilang, seperti halnya udara atau zat cair.
  Mengatasi masalah ini kita harus menerapkan deklarasi clear:both pada akhir kolom, dengan begitu aliran float akan terputus, dan Anda bisa mulai menulis artikel seperti biasa mulai dari sini:
  

  

  Menerapkan deklarasi clear:both;

  
  

Untuk layout yang disertai gambar silahkan baca artikel yang telah saya sebutkan di pendahuluan.