Menyamakan tinggi / height antara dua buat kolom dengan css kadang menyulitkan web designer, layout sudah dibuat dua kolom ternyata ketika salah satu kolom memiliki konten cukup banyak maka akan terlihat timpang, atau salah satu terlihat lebih panjang sedangkan yang satu lebih pendek.
Nah pada artikel ini tutorial-webdesign.com akan memberikan sedikit tips agar kolom yang dibuat bisa sesuai atau terlihat sama rata tingginya antara yang kiri dan yang kanan.
Membuat HTML
Pertama kita buat contoh layoutnya, disini kita buat dua kolom, yaitu col-left dan col-right.
Disitu dapat kita lihat kita membuat sebuah class .main
yang didalamnya ada class .col-left
dan class .col-right
yang isinya bisa disesuaikan dengan kebutuhan.
Agar .col-left dan .col-right selalu terlihat dengan tinggi yang sama maka kita tambahkan script css seperti dibawah ini.
Styling CSS
Kalau kita lihat kode CSS diatas, yang menarik disitu adalah pada bagian padding-bottom: 40000px;
dan margin-bottom:-40000px;
agar tidak terlihat sangat tinggi dengan nilai 40.000px maka class .main
kita beri overflow:hidden, sehingga bagian yang kepanjangan akan disembunyikan, jadi sekarang tingginya hanya tergantung teks yang ada didalam class .main
tersebut.
Demo & Source Code
Untuk demo dan kodenya bisa dilihat di link berikut disini.
Sekian.
Sekian tips dan triks kali ini, semoga membantu kesulitan anda dengan css
Salam Web Design Indonesia
super. ini dia yang di cari selama ini
seep .. makasih triknya
apakah menambah padding/margin segitu panjang tidak menambah beban?karena panjang sekali sampai 40.000px ,kalau saya sih biasanya dapat otomatis menyamakan tinggi element disebelahnya hanya dengan penambahan css clear:both
tidak, tinggal disesuaikan saja angkanya dengan tingi website (bisa dikira-kira).
Untuk clear:both bisa menyamakan gimana tuh? bisa liat contoh nya seperti apa?
buset extrem baget tuch nilainya sampe 40000px
itu hanya contoh, silahkan disesuaikan dengan tinggi website nya
berarti kalau membuat kolom kotak menggunakan tabel berarti salah besar ya?
Membuat layout dengan tabel itu salah :)
Karena tabel digunakan untuk menampung data tabular yang membutuhkan baris dan kolom
Keren ini mah, bisa diterapkan nanti kalo saya bikin layout tersebut. Dapet tempat belajar baru..
Alhamdulillah..
busseeeeeeeettt… angkanya ekstrim banget gan.
pke float gan, nanti distop pake clear:both
masalah responsive nya gimana pak ?
soal css sy yg sy pakai skrg sbnrnya responsive, tp height content ga sama dengan height sidebar, alhasil height masing2 div sy manualkan :D