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

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

TWD Editorial

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”

asrul alfi syahrin says:

July 16, 2013 at 12:09

super. ini dia yang di cari selama ini

Galih Shu says:

July 16, 2013 at 15:16

seep .. makasih triknya

johanes says:

July 29, 2013 at 19:45

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

TWD Editorial says:

July 29, 2013 at 20:51

tidak, tinggal disesuaikan saja angkanya dengan tingi website (bisa dikira-kira).
Untuk clear:both bisa menyamakan gimana tuh? bisa liat contoh nya seperti apa?

Reply

wahyoe says:

August 8, 2013 at 22:08

buset extrem baget tuch nilainya sampe 40000px

TWD Editorial says:

August 10, 2013 at 16:22

itu hanya contoh, silahkan disesuaikan dengan tinggi website nya

Reply

M Satria Irwanda says:

December 20, 2013 at 10:16

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

TWD Editorial says:

December 20, 2013 at 10:18

Membuat layout dengan tabel itu salah :)
Karena tabel digunakan untuk menampung data tabular yang membutuhkan baris dan kolom

Reply

Dafian says:

January 1, 2014 at 20:14

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

Alhamdulillah..

Deri Herdianto says:

January 2, 2014 at 06:25

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

rumahkita says:

February 7, 2015 at 01:52

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

Tutorial Web Design

Topik

Tags