Pancadewa's Blog

Memang gw belajar membuat web dari tahun 2000 dan mulai mengimplementasikan kedalam projek – projek yang gw kerjakan dari tahun 2003, tapi semua layout web dibangun dengan menggunakan standar HTML Tag yaitu <TABLE>.

Setelah trend dari membuat web menggunakan tag <DIV> makan tahun 2008 gw beranikan diri untuk membuat layout website dengan menggunakan <DIV> dan CSS untuk layout dan tampilannya tidak menggunakan <TABLE> lagi, karena katanya banyak kekurangan setelah membaca postingan – postingan para designer website apabila menggunakan <TABLE>.

Gw pelajari standar – standar penggunaan DIV + CSS dalam membangun layout, dan semuanya mudah dan baik – baik aje pada mulanya, dan suatu saat gw akhirnya menemukan sebuah permasalahan yang asli gw udah cari – cari ke web2 orang tapi hasilnya nihil (mungkin karena keywords yang gw gunakan pada saat search kurang mantep deh yah, hehehe…), yaitu permasalahan pada saat gw menggunakan style FLOAT untuk menggeser sebuah <DIV>, salah satunya gw kasih contoh di bawah ini:

Gw buat sebuah CSS seperti ini:

.container {
border: 2px solid #ff4000;
width: 400px;
padding: 5px;
background: #ff9f00;
}

.block_kiri {
float: left;
border: 2px solid #000000;
width: 100px;
height: 200px;
background: #d1d1d1;
}

.block_kanan {
float: right;
border: 2px solid #000000;
width: 100px;
height: 200px;
background: #d1d1d1;
}

.konten_web {
border: 2px solid #000000;
margin: 0px 110px;
background: #ffffff;
margin-bottom: 2px;
}

.konten_web_kiri {
float: left;
border: 2px solid #000000;
margin: 2px;
}

Dan HTML dengan DIV seperti ini:

<div class="container">
  <div class="block_kiri">Sidebar Kiri</div>
  <div class="block_kanan">Sidebar Kanan</div>
  <div class="konten_web">
    <div class="konten_web_kiri">Konten Web Float Kiri</div>
    <div class="konten_web_kiri">Konten Web Float Kiri</div>
    <div class="konten_web_kiri">Konten Web Float Kiri</div>
  </div>
  <div class="konten_web">Isi Konten Lainnya</div>
</div>

Nah tampilan yang gw dapet adalah:

Dari tampilan tersebut jelas kita lihat banyak kesalahan or berantakan banget,
1. pada bagian yang gw arsir warna orange tidak mengikuti tinggi DIV tertinggi, yaitu DIV sidebar.
2. bagian “isi kontent lainnya” ikut ter-float oleh konten web terakhir yang di float ke kiri.

Lalu gw coba meng-akali dengan menambahkan DIV dengan style clear:both di bawah DIV yang berisi konten web terakhir yang di float ke kiri, dan HTML berubah menjadi seperti ini:

<div class="container">
  <div class="block_kiri">Sidebar Kiri</div>
  <div class="block_kanan">Sidebar Kanan</div>
  <div class="konten_web">
    <div class="konten_web_kiri">Konten Web Float Kiri</div>
    <div class="konten_web_kiri">Konten Web Float Kiri</div>
    <div class="konten_web_kiri">Konten Web Float Kiri</div>
  </div>
  <div style="clear: both;">
  <div class="konten_web">Isi Konten Lainnya</div>
</div>

Akan tetapi hasil yang di dapat juga masih belum sempurna, yaitu seperti ini:

Karena sebelum DIV konten web lainnya gw berikan clear:both maka DIV tersebut langsung terjun kebawah setelah tampilan sidebar, hal ini yang membuat gw sempet puyeng delapan penjuru mata angin, heuheueh…

Akhirnya gw baca2 dan cari2 lagi informasi yang gw yakin harusnya ada pemecahannya, dan gw sekilas membaca di blog orang bule sono, katanya selain menggunkan clear float, kita juga bisa menggunakan overflow:hidden, ya akhirnya gw coba di implementasikan kepermasalahan gw, CSS pada class berikut gw ubah sedikit, dan DIV clear:both yang mengganjal antara konten DIV juga gw hapus dan CSS menjadi:

.container {
overflow: hidden;
border: 2px solid #ff4000;
width: 400px;
padding: 5px;
background: #ff9f00;
}

.konten_web {
overflow: hidden;
border: 2px solid #000000;
margin: 0px 110px;
background: #ffffff;
margin-bottom: 2px;
}

Dan… taraaa…. hasilnya benar-benar memuaskan, menjadi seperti ini:

Maka kesimpulan yang gw dapat kalau mau meng-clear kan sebuah float yang ada pada sebuah float, jangan menggunakan perintah “clear” akan tetapi menggunakan “overflow:hidden”

Dengan ilmu ini, akan menambah semangat dan percaya diri untuk membangun sebuah web dengan DIV dan CSS dengan bentuk tabular data yang lebih advance! huhuyyy….

Popularity: 16%