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.
1
<divclass="main">
2
<divclass="col-left">
3
<h2>Sidebar</h2>
4
<p>Content sidebar...</p>
5
</div>
6
7
<divclass="col-right">
8
9
<h2>Article</h2>
10
<p>Detail article...</p>
11
12
<h2>Article</h2>
13
<p>Detail article...</p>
14
15
</div>
16
</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
1
*{margin: 0;padding: 0;}
2
.main{
3
width: 500px;
4
margin: 20pxauto;
5
overflow: hidden;
6
}
7
.col-left,
8
.col-right{
9
float: left;
10
width: 200px;
11
padding-bottom: 40000px;
12
margin-bottom: -40000px;
13
background: green;
14
color: white;
15
}
16
.col-Right{
17
width: 300px;
18
background: yellow;
19
color: black;
20
}
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
