Teknik CSS imba Hari

:auto height for container div:

Gak kepikiran cara sesimpel ini. Kalo dulu kepikirannya pakai javascript yang bisa mengganti tinggi div container sebesar tinggi div-div di dalamnya.

Tujuannya si div container tingginya ngikutin tinggi si div-div yang berada di dalamnya. Ambil contoh, kita bayangkan gambar A. Kita pengen si div container X tingginya ngikutin tinggi si Y dan Z(tergantung mana yang lebih tinggi). Nah kalo kita buatnya cuma si Y pake float right dan si Z pake float left hasilnya bakalan relatif tidak seperti yang kita inginkan(Gambar B).

Ide teknik imba css hari gimana(haha, lebay2 tp emang hari imba) , adalah dengan memberikan satu lagi div tambahan di dalam container setelah div Y dan div Z, misalkan div dengan id dummy. Lalu id dummy beri CSS dengan clear:both.. damn it.. udah gitu aja gausah mikirin javascript syalala…

Ilustrasi gambarnya :

#Z{
float:left;
height:400px;
width:60%;
margin:10px;
}
#Y{
float:right;
height:400px;
widht:30%;
margin:10px;
}
#dummy{
clear:both
}
<html>
<body>
      <div id="X">
                <div id="Z"></div>
                <div id="Y"></div>
                <div id="dummy"></div>
      </div>
</body>
</html>

Hoho, semoga bermanfaat

Satu pemikiran pada “Teknik CSS imba Hari

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s