Mengenal Float
Float artinya mengambang. Setiap elemen CSS yang didefinisikan (diberi rule) float, akan mengambang di atas objek yang sudah ada dengan mengambil posisi dari pojok box model induknya. dan terus mengalir zigzag ke kanan (Z).
Memanfaatkan behaviour float seperti inilah kita akan membuat layout sederhana, layout dua kolom seperti gambar ini.
Memulai Meng-code
Buat dahulu halaman html yang kita perlukan. Kita akan memerlukan seksi (div) wrapper, header, sidebar, content, dan footer seperti ini:
<body>
<div id="wrapper">
<div id="header">
<h1>Bagian Header</h1>
</div>
<div class="clear"> </div>
<div id="content">
Bagian Isi
</div>
<div id="sidebar">
Navigasi Letaknya Di sini
</div>
<div class="clear"> </div>
<div id="footer">
Hak Cipta
</div>
</div>
</body>
Hasilnya akan seperti gambar ini.
Masih belum sesuai dengan keinginan kita kan?
Selanjutnya kita akan mengerjakan file CSS untuk layout ini. Di CSS ini saya sengaja memberikan border untuk setiap elemen div untuk memudahkan pembelajaran. jika sekiranya kita sudah selesai, border ini bisa dihilangkan.
Baik, inilah 9 baris CSSnya :
body {text-align: center}
#wrapper {margin: 0 auto; width:760px; text-align: left;}
#header {width: 100%; height: 100px;}
#content {float: left; width: 540px;}
#sidebar {float: right; width: 200px;}
#footer {width: 100%; height: 50px;}
#header,#content,#sidebar,#footer {border: 1px #eee solid}
#content,#sidebar {min-height: 300px;} /* only work on IE before 7 */
.clear {clear: both; height: 20px;}
Hasilnya seperti
Penjelasannya saya rasa sederhana saja.
Pertama kali saat browser membaca tag body, segala object didalamnya akan rata tengah. Kemudian wrapper mengatur posisi dirinya relatif kiri - kanan dengan jarak sama (rata tengah), kemudian mengatur lebar dirinya sebesar 760 pixel dan menormalkan segala object menjadi rata kiri.
Sebagai object pertama di dalam wrapper, header menempatkan dirinya di posisi atas dengan tinggi 100 pixel dan lebar 100% atau sama dengan 760 pixel.
Sementara itu, bagian content akan menempatkan diri mengambang di kiri dengan lebar 540 pixel. Kemudian sidebar akan mengambang di sisi kanan dengan lebar 200 pixel. Jarak kosong antara content dan sidebar masih ada sebesar 20 pixel akan menjadi white space.
Nah, setelah itu barulah footer menempatkan diri di bagian paling bawah dengan tinggi 50 pixel dan lebar 100%.
O ya, di antara header dengan content-sidebar dan content-sidebar dengan footer, saya menempatkan si clear. Clear memberi jarak yang cukup (white space) sebesar 20 pixel. Fungsi clear yang paling utama adalah untuk menetralkan dan menghentikan efek float.
Catatan: Untuk menukar posisi content dan sidebar ke kiri atau ke kanan, silahkan menukar posisi floatnya saja. dari left ke right dan sebaliknya.
Nah, selesailah sudah tutorial membuat layout 2 kolom dengan float ini. Semua materi tutorial ini saya zip dan bisa di download di sini.
file latihan
Ini ada lanjutannya:
Powered by ScribeFire.
6 Comments
oke........
ReplyDeleteThanks ya.. :)
ReplyDeletetrima kasih. coba ya....
ReplyDeleteSip, smoga banyak manfaatnya nis artikle
ReplyDeletepunya ato bisa gk kasi tutorial cara menambah file.php ato melalui wrapper joomla...
ReplyDeleteplease donk...
@dikir234
ReplyDeletewrapper .php haruslah file yang ditulis dalam kode php atawa di markup . Selain itu ndak mau dia. Contoh: