Kita mulai dengan source code kosong. Saya sudah menyediakan 2 buah file, yaitu float.html dan float.css. Pertama kita isikan file HTML terlebih dahulu.

Kita tambahkan HTML Boilerplate. Lalu kita beri judul float. Ingat bahwa judul pada file HTML harus dituliskan sebanyak dua kali. Yang pertama pada tag Title. Dan kemudian di dalam tag Body, kita tambahkan lagi tag H1 dengan konten Float.

Selanjutnya kita tambahkan tiga buah div, dengan nama kelas merah kuning hijau. Kita bisa menuliskan div.merah+div.kuning+div.hijau dan menekan tombol Ctrl+E. Cara ini hanya bisa dilakukan kalau kita sudah menambahkan paket Emmet ya.

Sekarang kita akan menambahkan kode CSS-nya. Sebelum melanjutkan, kita buat dahulu tag link untuk menuju ke kode CSS kita di float.css. Dan selector pertama yang akan kita tambahkan adalah selector div. Kita berikan properti width dengan nilai 200px dan height dengan nilai 200 px. Setelah itu kita tambahkan masing-masing kelas merah kuning hijau dengan background color sesuai nama kelasnya.

Kita simpan dan refresh browser. Kita akan mendapatkan tiga buah kotak yang bejejer ke bawah. Sama seperti video sebelumnya ya.

Kita akan mempelajari mengenai properti float. Pertama kita tambahkan dahulu properti float pada kelas kuning. Ada 3 nilai yang bisa kita isikan untuk float ya. Yang pertama adalah None, ini adalah nilai default yang artinya tidak ada float. Yang kedua adalah left untuk float di sebelah kiri. Dan yang ketiga adalah right untuk float di sebelah kanan. Kita coba dahulu nilai left ya.

Kita simpan dan refresh browser. Tadinya ada kotak hijau yang berada di bawah kotak kuning, sekarang menjadi hilang ya. Jadi properti float ini mirip dengan properti position absolute. Kotak kuning akan dikeluarkan dari flow dokumen, sehingga kotak hijau akan naik ke atas untuk mengisi posisi lama kotak kuning. Jadi kotak hijau sebenarnya sekarang berada di belakang kotak kuning. Untuk melihat kotak hijau, kita bisa menggeser kotak kuning sedikit ke kanan, dengan menambahkan properti margin-left: 100px. Nah sekarang kita sudah bisa melihat kotak hijau berada di belakang kotak kuning.

Selanjutnya kita coba ubah nilai properti float menjadi right. Dan kita hapus properti marginnya. Sekarang kotak kuning menjadi melayang di kanan. Sedangkan kotak merah dan hijau tetap berada di kiri.

Apa fungsi dari properti float ini? Nah, sebagai contoh pertama, kita bisa menghapus properti float: right dari kelas kuning. Dan kemudian kita tambahkan float: left pada selector div. Artinya ketiga kotak akan float di sebelah kiri. Kita simpan dan refresh browser. Sekarang kita sudah mendapatkan tiga buah kotak yang bersusun ke sebelah kanan, dengan urutan merah kuning hijau.

Kotak bersusun ke kanan seperti ini, sebenarnya bisa kita dapatkan menggunakan properti lain ya. Properti ini sudah kita pelajari dalam video sebelumnya. Mungkin teman-teman masih ingat apa nama propertinya? Kita coba hapus ya properti float: left. Lalu kita ganti dengan display: inline-block.

Kita simpan dan refresh browser. Kita mendapatkan hasil yang sama ya. Hanya saja sekarang diantara kotak terdapat jarak satu buah spasi, hal ini bisa diakali dengan cara menghapus semua white space diantara tag penutup div dan tag pembuka div.

Jadi di dunia pemograman ini, kita mengenal pepatah yang mengatakan bahwa ada banyak jalan menuju Roma. Kita bisa mendapatkan hasil yang sama, dengan menggunakan beberapa cara yang berbeda. Dalam contoh disini adalah dengan menggunakan properti float:left atau properti display: inline-block.

Namun disini ada perilaku spesial dari properti float, yang tidak bisa kita dapatkan dari properti display. Sebagai contoh, kita ubah lagi properti display menjadi float: right. Sekarang kita mendapatkan tiga buah kotak yang disusun dari sebelah kanan, dan perhatikan posisi merah kuning dan hijaunya dihitung dari sebelah kanan. Kalau kita hendak menyusun kotak seperti ini dengan menggunakan properti display, maka kita harus menambahkan beberapa properti lainnya, sedangkan dengan menggunakan properti float kita cukup menggunakan satu baris kode saja.

Dan kita juga bisa membuat agar sebagian kotak disusun dari kanan, dan sebagian kotak disusun dari kiri. Sebagai contoh disini semua kotak sudah disusun dari sebelah kanan. Saya tambahkan properti float: left pada kotak kuning. Maka sekarang kotak kuning berada di sebelah kiri, sedangkan kotak merah dan hijau berada di sebelah kanan.

Properti float ini bisa kita gunakan untuk membuat sidebar. Sebagai contoh, misalkan kita buka situs Detik.Com. Bisa dilihat disini, sebelah kiri ini adalah konten utama dari situs detik. Sedangkan di sebelah kanannya ini ada bagian yang kita sebut dengan nama sidebar.

Kita coba terapkan di source code kita. Jadi kita hanya menggunakan 2 buah div ya. Kita misalkan div merah kita adalah sidebar, jadi kita tulis kontennya Sidebar. Sedangkan div kuning kita isikan dengan konten Utama. Kita hapus div hijau.

Kemudian kita buat sebuah div dengan kelas container. Kita pindahkan seluruh tag h1, div merah dan div hijau ke dalam container.

Lalu pada kode CSS, kita hapus semua properti pada div. Kelas merah adalah sidebar dengan ukuran width lebih kecil. Disini kita berikan width sebesar 200px, height: 600px dan float: left. Sedangkan kelas kuning adalah konten utama, kita berikan width yang lebih besar yaitu 400px, height yang sama 600 pixel dan kita biarkan properti float-nya. Dan kemudian kita hapus kelas hijau.

Selanjutnya agar tampilan kita lebih rapi, kita atur kelas container kita. Kita berikan width sebesar 600 pixel. Nilai 600 ini kita dapatkan dari lebar merah 200 pixel ditambah dengan lebar kuning 400 pixel. Lalu agar container berada di tengah layar, maka kita tambahkan margin: auto.

Nah sekarang kita sudah memiliki mock up situs blog dengan satu sidebar seperti situs detik. Kita tinggal menambahkan konten pada side bar dan konten utamanya. Dan apabila kita ingin memindahkan sidebar ke sebelah kanan, kita bisa dengan mudah mengganti nilai properti float pada kelas merah menjadi right. Dan sidebar pun akan berpindah ke sebelah kanan.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.