Selamat Datang

Trik Menyamakan Tinggi Kolom DIV Dengan CSS

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.

CSS Column Height

CSS Column Height

Membuat HTML

Pertama kita buat contoh layoutnya, disini kita buat dua kolom, yaitu col-left dan col-right.

		<div class="main">
			<div class="col-left">
				<h2>Sidebar</h2>
				<p>Content sidebar...</p>
			</div>

			<div class="col-right">

				<h2>Article</h2>
				<p>Detail article...</p>

				<h2>Article</h2>
				<p>Detail article...</p>

			</div>
		</div>

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

*{margin: 0;padding: 0;}
.main{
	width: 500px;
	margin: 20px auto;
	overflow: hidden;
}
.col-left,
.col-right{
	float: left;
	width: 200px;
	padding-bottom: 40000px;
	margin-bottom: -40000px;
	background: green;
	color: white;
}
.col-Right{
	width: 300px;
	background: yellow;
	color: black;
}

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

11 thoughts on “Trik Menyamakan Tinggi Kolom DIV Dengan CSS

  1. super. ini dia yang di cari selama ini

  2. Galih Shu says:

    seep .. makasih triknya

  3. johanes says:

    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?

  4. wahyoe says:

    buset extrem baget tuch nilainya sampe 40000px

  5. M Satria Irwanda says:

    berarti kalau membuat kolom kotak menggunakan tabel berarti salah besar ya?

  6. Dafian says:

    Keren ini mah, bisa diterapkan nanti kalo saya bikin layout tersebut. Dapet tempat belajar baru..

    Alhamdulillah..

  7. busseeeeeeeettt… angkanya ekstrim banget gan.
    pke float gan, nanti distop pake clear:both

  8. rumahkita says:

    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

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development