Div, html sayfasında bir bölüm oluşturmak istediğimizde kullanılır.
** <div> etiketi block etikettir yani bir genişlik değeri (width) vermediğimiz sürece satırı olduğu gibi kaplar ve yükseklik olarakta içerisinde bulunan öğelerin sahip olduğu yükseklik kadar bir yüksekliğe sahip olurlar.
Örneğin; bir site tasarımını bölmelere ayıralım.
** En dışarıda bir container isminde div oluşturduk.
<div id="container"> <div id="header"> </div> <div id="content"> </div> </div>
** Bu container div' ini oluşturmaktaki maksat tüm içerikleri aynı anda ortak bir şekilde yönetmek.
#container {
width: 600px;
height: 300px;
background-color: blue;
}
#header {
width: 400px;
height: 100px;
background-color: red;
}
#content {
width: 500px;
height: 150px;
background-color: green;
}
** Div 'lere verdiğimiz genişlik değerleri px cinsinden olmak zorunda değildir. Yüzde olarak da değer verebiliriz. Örneğin tarayıcı genişliği o anda kaç ise <div>' in genişliğinin sayfanın %70'i kadar olmasını isteyebiliriz.
div {
width:70%;
}
** Eğer bir <div> için bir yükseklik değeri verirsek ve içinde bulunan elemanların yüksekliği div in yüksekliğini aşarsa bu durumda oluşacak overflow yani taşma için bazı seçeneklerimiz vardır.
overflow : auto | hidden | scroll | visible
** auto : eğer ki içeriklerin yüksekliği sabit değerli div in yüksekliğinden fazlaysa scrollbar çubukları yani dikey ve yatay kaydırma çubukları görünür hale gelecektir aksi halde görünmez.
** hidden : bu durumda taşma olan kısım görünmez hale getirilir.
** scrool : auto' nun aksine her zaman kaydırma çubukları görünür eğer taşma yoksa bile pasif bir şekilde kaydırma çubuklarını görebiliriz.
** visible : taşmalar görünür olur.