Mengatur tata letak pada CSS sangat sering menggunakan elemen block-level, namun penggunaan elemen block-level memiliki aturan default dimana elemen tersebut selalu mengambil lebar penuh (max-width) yang tersedia pada layar. Hal tersebut akan menjadi masalah ketika halaman web diakses menggunakan perangkat kecil maka konten akan terpotong. Untuk itu bagaimana cara mengatasi hal itu? berikut penjelasannya.
Menggunakan width, max-width and margin: auto;
Seperti yang disebutkan di bab sebelumnya elemen block-level selalu mengambil lebar penuh (max-width) yang tersedia pada layar (membentang ke kiri dan ke kanan sejauh mungkin).
Dengan mengatur lebar (width) elemen block-level akan mencegah aturan default max-width yang akan selalu mengambil lebar penuh yang tersedia . Dan dengan pengaturan margin menjadi otomatis dapat digunakan untuk memusatkan elemen secara horizontal di dalam penampungnya. Elemen akan menggunakan lebar yang ditentukan, dan ruang yang tersisa akan dibagi rata antara dua margin.
Berikut ini dalah contoh penggunaan max-width dan width dengan margin:auto; :
<!DOCTYPE html> <html> <head> <style> div.ex1 { width:500px; margin: auto; border: 3px solid #73AD21; } div.ex2 { max-width:500px; margin: auto; border: 3px solid #73AD21; } </style> </head> <body> <div class="ex1">Elemen div ini memiliki width: 500px;</div> <br> <div class="ex2">Elemen div ini memiliki max-width: 500px;</div> <p><strong>Tip:</strong>Tip: Ubah ukuran jendela browser menjadi kurang dari 500px lebarnya, untuk melihat perbedaan antara kedua div.</p> </body> </html>
Catatan: Masalah yang ada pada elemen <div> di atas akan terjadi saat jendela browser lebih kecil dari lebar elemen. Browser kemudian akan menambahkan scrollbar horizontal ke halaman.
Alih-alih, menggunakan max-width, dalam situasi ini penggunaan width akan meningkatkan cara penanganan pada jendela browser yang kecil. Hal ini menjadi penting saat membuat situs agar dapat digunakan di perangkat kecil.
Tip: Ubah ukuran jendela browser menjadi kurang dari 500px lebarnya, untuk melihat perbedaan antara kedua div.
