Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Layout Tiga Kolom dengan CSS Float

CSS layout kolom column

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:

css
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 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:

    css layout kolom column
    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:


    css layout kolom column
    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:

    contoh penerapan clear:both pada elemen
    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".

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 15 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!