Agar Kolom Div Sama Tinggi

Holla, apa kabar semua ? ^_^ pada artikel kali ini kita akan membahas tentang kolom pada website. Pernah tidak kalian membuat sebuah kolom pada website menggunakan <div> ? jika pernah pasti kalian juga merasakan SUSAHNYA mengatur height atau tinngi pada sebuah kolom agar sama rata.

Karena kadang web designer kesulitan untuk menyamaratakan tinggi dari sebuah kolom , misal jika kolom sebelah kiri contentnya lebih banyak di banding dengan kolom maka tinggi dari kom tersebut akan timpang sebelah. Nah bagaimana caranya agar kolom itu sama rata walaupun content nya saling berbeda jumlahnya ?

Saya telah membuat beberapa baris program untuk mencontohkan gimana agar kolom tersbut sama rata

<!doctype html>
<html>

<head>
<title></title>
<style>
*{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: blue;
	color: white;
}
.col-right{
	width: 300px;
	background: red;
	color: black;
}
</style>
</head>

</body>
<div class="main">
			<div class="col-left">
				<h2>Sidebar</h2>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
			</div>

			<div class="col-right">

				<h2>Article</h2>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>

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

			</div>
		</div>
</body>
</html>

Lalu jalankan pada browser kalian, maka hasilnya akan seperti ini:

Nah dengan menggunakan cara di atas entah seberapa banyak konten yang kalian berikan maka heightnya akan sama.

Pertanyaanya kok bisa ? bagaimana caranya ?

Jika kalian perhatikan bagian cssnya

Saya telah memberi:

padding-bottom: 40000px;
margin-bottom: -40000px;

Inilah yang membuat dinamis, agar tidak terlihat ketinggian saya menggunakan properties OVERFLOW:HIDDEN pada bagian class min .untuk menyembunyikan sisa tingginya tadi.

Itulah cara Agar Kolom Div Sama Tinggi, Tinggal kalian pelajari dan pahami lalu implementasikan pada website kalian.

Terimakasih.

Kategori