CSS Layout - width and max-width

Seperti disebutkan dalam bab sebelumnya; elemen blok-tingkat selalu mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).

Mengatur lebar elemen blok-tingkat akan mencegah dari peregangan keluar ke tepi wadah. Kemudian, Anda dapat mengatur margin untuk mobil, untuk horizontal pusat elemen dalam wadah. Elemen akan mengambil lebar tertentu, dan ruang yang tersisa akan dibagi sama antara kedua margin

Catatan: Masalah dengan <div> di atas terjadi ketika jendela browser lebih kecil dari lebar dari elemen. Browser kemudian menambahkan scrollbar horisontal ke halaman. Menggunakan max-width sebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil. Hal ini penting ketika membuat sebuah situs yang dapat digunakan pada perangkat kecil:

Tip: Tarik jendela browser lebih kecil dari 500px lebar, untuk melihat perbedaan antara dua divs! Berikut adalah contoh dari dua divs di atas:

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #8AC007;
}