DUA KOLOM RESPONSIVE DENGAN CSS3 BOX-SIZING

Selamat pagi, pada kesempatan pagi ini saya akan berbagi kepada Anda tentang bagaimana membuat dua kolom yang super responsive. Sebenarnya tutorial dalam membuat dua kolom responsive ini sudah banyak bisa Anda search di google, namun gak ada salahnya saya tambahkan di sini. Dalam membuat dua kolom responsive sangat sederhana sekali 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.

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

<div class="DuaKolom">

<div class="KolomKiri">
<h2>Kolom Kiri</h2>

</div>

<div class="KolomKanan">
<h2>Kolom Kanan</h2>

</div>

</div>

• Demo

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

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250