Şimdi DIV ile nasıl kendimize ait bir bölme oluşturduğumuzu ve bunu nasıl sayfamıza yerleştirdiğimizi görelim.

.myBox{

background-color:#999999;

border: solid 1px black;

width:300px;

}

 

<div class="myBox">İçerik Buraya</div>

 
DIV ile aluşturduğumuz bölgeyi sayfa içinde istediğimiz gibi yerleştirebilmek içinde position özelliğini kullanırız.

Relative positioning: Eğer position özelliğini relative tanımlarsak bölgemiz nerde ise aynen orda olacaktır.

 

.myBox{

background-color:#999999;

border: solid 1px black;

width:300px;

Position: relative;

}

       

Absolute positioning: Eğer absolute değeri atarsak bölgemiz bulunduğu yerde diğer elementler yokmuş gibi duracaktır. Bazı menulerde görürüz linkin üzerine geldiğimizde yeni bir pencere açılmış gibi alt menu görünür ve bu menu HTML sayfasının üzerinde gibidir. İşte bunu yapmak için absolute özelliğini kullanmak gerekir.

 

.myBox{

background-color:#999999;

border: solid 1px black;

width:300px;

Position: absolute;

}

 
Oluşturduğumuz bölgeyi sağa sola yaslamak için float özelliğini kullanmak  gerekir
 

.myBox{

background-color:#999999;

border: solid 1px black;

float:left;

width:300px;

}       

.myBox img {

float:left;

}

.myBox p {

float:right;

}

 

<div class="myBox">

<img src=tst.gif />

<p>icerik</p>

</div>

 
float özelliği ile oluşturduğumuz bölgeyi yerleştirmek bazı sorunlara neden olabilir. Çrneğin bunun atına bir yazı girdiğinizde yazı bölgenin yanında görünecektir. Bu sorunu çözmek için kesin bir uzunluk width tanımlamak yada float özelliğini işimiz bittikten sonra temizlememiz gerekir.


.clear {

Clear: both;

}

 

<div class="myBox">

<img src=tst.gif />

<p>some text</p>

</div>

<div class="clear"></div>

alt satı yazısı