Mecha versi 2.6.4 sudah dirilis!

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 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:
    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".

Lihat Demo

15 Komentar

Piyen

tutorial yang menarik....
tapi kan masalahnya kita juga harus menyesuaikan banyaknya karakter pada tiap kolom, ada cara gak supaya tidak harus membagi sendiri tapi otomatis terbagi dengan banyaknya kolom yang kita buat...

Taufik Nurrohman

@DuniaPiyen: Iya ya.. hehe. bener juga. Dikira-kira saja sendiri T_T

Putra

nah, ketemu juga caranya biar bawahnya/atas rata dikasih <div style='clear:both;'></div>
ilmuuunya keren keren dah, salut bangetssss \o/

Unknown

Bang eh mas taufik yang ganteng mau nanya nich bedanya css float dan Grid itu apa yach, kerena ada sebagian tutorial mengunakan float ada yang mengunakan Grid. enaknya mengunakan yang mana mas ?? saya udah nanya sama yang nulis tutor tapi tidak di jawab. sekarang mas lagi olkan ??

Taufik Nurrohman

@Suwardi Unggit CSS Grid itu cuma nama saja. Implementasinya menggunakan CSS Float. float adalah salah satu nama properti dalam CSS yang biasa digunakan untuk membuat layout grid. Jadi, Float maupun Grid itu cuma beda istilah saja. Intinya sih bikin kolom-kolom pake CSS. Gitu doang :W

Unknown

@Taufik Nurrohman Kalau buat postingan blogazine seperti seperti screnshot di bawah ini bagai mana mas...?? itu aku ambil dari blogazine milik kompeni mas tidak ada tutorial sama sekali diblog itu..

Taufik Nurrohman

@Suwardi Unggit Lebih baik mulai dengan Grid System. Saya menggunakan rancangan grid dari Andy Taylor karena Saya merasa cocok dengan cara kerjanya. Implementasinya juga sangat mudah. Asalkan kita sudah menyisipkan Sistem Grid di dalam template, yang kita lakukan selanjutnya tinggal menerapkan kelas-kelas grid tersebut saja sesuai dengan ukuran yang tertera:

<div class="row">
<div class="sixcol"> ... </div>
<div class="sixcol last"> ... </div>
</div>

Demo: http://jsfiddle.net/tovic/QgdKx/embedded/result/

[note]Tentang Andy Taylor: The 1140px CSS Grid System[/note]

Unknown

@Taufik Nurrohman terima kasih mas, berarti dalam floaatnya disipkan tag H misalnya tag h3 yang diberi background yach.

Unknown

Komentar ini telah dihapus oleh pengarang.

Unknown

@Taufik Nurrohman dari penjelasan Andy Taylor sih mantap dan menarik sehinga bisa bekerja pada layar 1280 dan bahkan bisa menyesuaikan diri pada mobile sehingga tampil sempurna pada Chrome, Safari, Firefox, IE7 & IE8. berarti untuk opera dan IE6 tingal oprek-oprek dikit. memang mas taufik paling ganteng dan selalu memberi kemudahan sehingga tidak sibuk2 lagi mikirkan responsive..

Taufik Nurrohman

@Suwardi Unggit IE9- sudah ada format CSS-nya tersendiri:

<!--[if lte IE 9]>
<style type='text/css'>
.onecol {
width:4.7%;
}
.twocol {
width:13.2%;
}
.threecol {
width:22.05%;
}
.fourcol {
width:30.6%;
}
.fivecol {
width:39%;
}
.sixcol {
width:48%;
}
.sevencol {
width:56.75%;
}
.eightcol {
width:61.6%;
}
.ninecol {
width:74.05%;
}
.tencol {
width:82%;
}
.elevencol {
width:91.35%;
}
</style>
<script type='text/javascript' src='css3-mediaqueries.js'></script>
<![endif]-->

Saya rasa Opera tidak punya masalah serius dengan Grid Layout.

Unknown

@Taufik Nurrohman wah terima kasih mas tambahanya jadi makin semangat nich, ntar dh aku tunjukin blogazine bungkus terasiku mas kalau udah pick semua..

Unknown

terima kasih, baru ngerti tentang clear both nih :) dulu kukira tidak ada gunanya hehe

Komentar telah ditutup.