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

.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>

Demosion 

Sederhana bukan ??
Mudah-mudahan bermanfaat dan selamat berkreasi ....!!