Di masa lalu, banyak situs web menggunakan tabel HTML untuk meletakkan halaman karena metode ini menghasilkan hasil yang dapat diandalkan secara konsisten di browser Web yang lebih lama. Ini bukan solusi yang ideal, karena tabel sebenarnya dimaksudkan untuk menampilkan data tabular daripada meletakkan halaman. Menggunakan tabel juga berarti bahwa tata letak itu dikodekan ke dalam halaman, membuat tugas memperbarui situs lebih memakan waktu. Cascading Style Sheets memperkenalkan properti "float", yang memungkinkan desainer mengapung elemen ke kiri atau kanan. Ini memungkinkan lebih banyak kontrol atas halaman dan memiliki keuntungan tambahan untuk menjaga tata letak situs terpisah dari konten.

1.

Buka editor teks atau editor HTML dan buat dokumen HTML baru.

2.

Tambahkan kode berikut ke badan halaman:

Simpan halaman dan buka di browser Web Anda. Anda akan melihat bahwa konten di div kedua ditampilkan di bawah konten di div pertama.

3.

Masukkan kode CSS berikut ke bagian dokumen HTML Anda:

Simpan halaman dan segarkan di browser Anda untuk menampilkan perubahan. Aturan CSS menargetkan kedua div yang bersarang dalam div "myContainer". Properti "float" memberi tahu browser untuk mengapung divs ke kiri - Anda dapat mengubah nilai float ke "kanan" untuk mengapung divs ke tepi kanan div yang berisi. Divs diatur ke lebar tetap 300 piksel dan memiliki batas hitam 1-piksel untuk membuat tata letak lebih mudah dilihat. Di browser Anda, Anda akan melihat bahwa kotak-kotak itu sekarang ditampilkan berdampingan.

4.

Tambahkan div ketiga ke badan halaman, di luar div "myContainer" seperti yang ditunjukkan di bawah ini:

Simpan halaman dan muat ulang di browser Anda. Anda akan melihat bahwa div ketiga ditampilkan di sebelah div pertama dan kedua, meskipun belum di-floating. Ini terjadi karena elemen HTML yang tersisa mengalir di sekitar elemen melayang. Ini bisa menjadi perilaku yang diinginkan dalam beberapa kasus, tetapi dalam contoh ini, kami ingin div ketiga ditampilkan di bawah div mengambang untuk membuat catatan kaki.

5.

Masukkan aturan berikut ke bagian gaya di bagian atas halaman:

myFooter {

clear: both; 

}

Ini menargetkan div "myFooter" ketiga dan memberi tahu browser untuk menghentikan float dan menampilkan elemen HTML berikutnya di bawah div "myContainer". Simpan dan segarkan halaman. Anda akan melihat bahwa footer yang dibentuk oleh div ketiga sekarang ditampilkan di bawah div mengambang.

Tip

• Anda dapat menggunakan properti "margin" CSS untuk membuat ruang di antara div yang mengambang.