Dua Kolom Responsive dengan CSS3 box-sizing
Pada kesempatan kali ini saya akan menjawab request dari sahabat yang menanyakan tentang bagaimana membuat dua kolom yang super responsive . Sebenarnya trik dalam membuat dua kolom responsive ini sudah bertaburan diluar sana , namun gak ada salahnya saya tambahkan disini . Dalam membuat dua kolom responsive sangat lah sederhana karena saya memanfaatkan CSS3 box-sizing sebagai pengatur jarak permanen. Property CSS3 box-sizing ini hampir suport pada semua browser . Kodenya seperti dibawah ini
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Fitur ini sangat berguna ketika kita akan mengatur lebar pada sebuah area / elemen. Contoh saya akan membuat dua area kolom .
CSS
CSS
.KolomKiri,.KolomKanan {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.DuaKolom { position: relative; margin: .5em; }
.KolomKiri, .KolomKanan { border: 1px solid #ccc; padding: 1.25em; }
.KolomKiri { margin-bottom: .5em; }
@media screen and (min-width: 47.5em ){
.KolomKiri { margin-right: 19.5em; }
.KolomKanan { position: absolute; top: 0; right: 0; width: 18.75em; }
}
HTML
<div class="DuaKolom">
<div class="KolomKiri">
<h2>Kolom Kiri</h2>
</div>
<div class="KolomKanan">
<h2>Kolom Kanan</h2>
</div>
</div>
Sederhana bukan ??
Mudah-mudahan bermanfaat dan selamat berkreasi ....!!