Sebuah elemen blok merupakan elemen yang mengambil lebar penuh yang tersedia, dan memiliki satu baris sebelum dan setelah itu.Contoh unsur-unsur blok:

•      <h1>
•      <p>
•      <div>

Untuk menyelaraskan teks, lihat bab Teks CSS.Dalam bab ini kami akan menunjukkan Anda bagaimana untuk menyelaraskan unsur-unsur blok horizontal untuk keperluan tata letak.

Elemen blok dapat sejajar dengan menetapkan margin kiri dan kanan untuk “otomatis”.Catatan: Menggunakan margin: otomatis tidak akan bekerja di IE8 dan sebelumnya, kecuali dinyatakan DOCTYPE!.

Mengatur margin kiri dan kanan ke auto menetapkan bahwa mereka harus membagi sama margin yang tersedia. Hasilnya adalah elemen berpusat:

.center

{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

 

 

 

Tip: Menyelaraskan tidak berpengaruh jika lebar adalah 100%.

Catatan: Dalam IE5 ada penanganan marjin bug untuk elemen blok. Untuk membuat contoh di atas bekerja
di IE5, menambahkan beberapa kode tambahan. Cobalah sendiri

Kiri dan Kanan Alignment Menggunakan Properti posisi

Salah satu metode elemen menyelaraskan adalah dengan menggunakan posisi absolut:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

 

 

 

Masalah Kompatibilitas Crossbrowser

Ketika menyelaraskan elemen seperti ini, itu selalu merupakan ide yang baik untuk predefine
margin dan padding untuk elemen body. Hal ini untuk menghindari perbedaan visual dalam browser
yang berbeda.

Ada masalah dengan IE8 dan sebelumnya, ketika menggunakan properti posisi. Jika elemen wadah (
dalam kasus kami <div class=”container”>) memiliki lebar tertentu, dan deklarasi! DOCTYPE yang
hilang, versi IE8 dan sebelumnya akan menambahkan margin 17px di sisi kanan. Hal ini tampaknya
menjadi ruang dicadangkan untuk scrollbar. Selalu mengatur deklarasi DOCTYPE ketika menggunakan
properti posisi:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}