Cara Menampilkan Kotak Berdampingan dalam HTML

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

1

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

2

Tambahkan kode berikut ke badan halaman:

Ini adalah teks di div pertama Ini adalah teks di div kedua

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

3

Sisipkan kode CSS berikut ke dalam bagian dokumen HTML Anda:

Simpan halaman dan segarkan di browser Anda untuk menampilkan perubahan. Aturan CSS menargetkan kedua div yang bersarang di dalam div "myContainer". Properti "float" memberi tahu browser untuk mengapungkan div ke kiri - Anda dapat mengubah nilai float ke "kanan" untuk mengapungkan div ke tepi kanan div yang berisi. Div disetel 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 sekarang ditampilkan berdampingan.

4

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

Ini adalah teks di div pertama Ini adalah teks di div kedua Ini adalah teks di div ketiga

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

5

Sisipkan aturan berikut ke dalam bagian gaya di kepala halaman:

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.