Anda memiliki situs web, tetapi kotak div tidak berbaris dengan benar. Ini bisa terjadi karena beberapa alasan, terutama ketika Anda mempertimbangkan masalah posisi dengan divs dari satu situs web ke yang lain. Demikian pula, elemen kotak mungkin tumpang tindih karena beberapa alasan, mulai dari kesalahan penentuan posisi hingga masalah overflow dan masalah float sederhana. Dalam kebanyakan kasus, perubahan cepat dan mudah ke style sheet situs web Anda akan memperbaiki masalah.

1.

Tambahkan margin jika kotak saat ini tidak memiliki margin dan tumpang tindih dengan hanya sedikit. Anda dapat mengatur margin di hanya satu sisi, seperti di sebelah kiri, jika Anda hanya ingin menggunakan elemen margin untuk mendorong elemen kotak lainnya. Misalnya, jika div A dan div B ditempatkan di sebelah satu sama lain dan div B tumpang tindih di sisi kiri, Anda bisa memodifikasi style sheet Anda untuk menambahkan margin sisi kiri ke div A sebagai berikut:

a {width: 100px; margin-kiri: 10px; }

2.

Cari lembar gaya Anda untuk nilai posisi yang dapat menyebabkan tumpang tindih dan ubahlah. Jika Anda menggunakan penentuan posisi absolut untuk mengatur elemen div situs web Anda, maka itu elemen gratis-untuk-semua - elemen apa pun dapat tumpang tindih dengan elemen lain pada halaman. Jadi, jika Anda memiliki div A yang ditetapkan dengan lebar 100 piksel dan 15 piksel dari bagian atas dan kiri halaman, div B harus setidaknya 115 piksel ke kiri agar tidak tumpang tindih dengan div A. Anda dapat menentukan posisi dari atas atau bawah, dan dari kanan atau kiri.

3.

Atur div dengan lebar tertentu dan sembunyikan overflow. Ini menghentikan div dari melebihi ukuran yang ditentukan dan mencegah konten dari tumpah, sehingga untuk berbicara. Misalnya, jika div A tidak memiliki lebar yang ditetapkan dan Anda memasukkan gambar besar di dalamnya, div akan secara otomatis meluas untuk mengakomodasi gambar. Jika Anda mengatur lebar, gambar akan tetap ditampilkan di luar tepi div, tetapi div tidak akan meluas. Jika Anda menyembunyikan overflow, gambar hanya akan ditampilkan dalam batas-batas div dan tidak akan memperluas elemen. Misalnya, untuk mengatur div A menjadi 200 piksel lebar dan tidak meluap, Anda akan menggunakan kode gaya ini:

a {width: 200px; overflow: disembunyikan; }

4.

Gunakan opsi "float" untuk menumpuk kotak div berdampingan secara otomatis. Misalnya, Anda ingin div A berfungsi sebagai bilah sisi dan div B untuk menahan konten Anda - Anda dapat melayang kedua div ke kiri, sehingga menyebabkannya sejajar secara horizontal. Elemen div yang melayang tidak akan tumpang tindih. Contoh dari dua elemen melayang terlihat seperti ini:

a {width: 150px; mengapung: kiri; }

b {width: 400px; mengapung: kiri; }

Kiat

• Jika Anda menggunakan Firefox, Anda dapat mengklik kanan kotak dan memilih "Elemen Inspeksi." Ini memberi Anda garis besar visual dari setiap elemen yang sering dapat membantu Anda menentukan masalah yang sangat rumit.
• Anda dapat mengatur overflow untuk menyembunyikan hanya pada sumbu x atau y menggunakan "overflow-x" atau "overflow-y."