Div'leri Yan Yana Siralama

Herkesin merak ettiği bir konu da Dreamweaver'da div'leri yan yana sıralamaktır. Bu derste bunun basit bir yöntemini ele alacağız.

Ben ilk başta yan yana sıralayacağım div'lerin dışına başka bir div eklemeyi tercih ettim ve içindeki bölmeleri yan yana sıraladım.

Evvela, 2 div açalım; birisi dıştaki div olan dis_bolme, diğeri de dış div'in içinde yer alan bölüm olan ic.bolme,

<style type="text/css">
#dis_bolme { 
width: 500px; 
height:250px;
background-color: #666
}
.ic_bolme{
	float:left;
	width:150px;
	height:150px;
	border:#CCC solid 1px;
	background-color: #F00;
	margin-right: 10px;
	margin-left: 4px;
</style>

Bölmelerin arasında 2px lik boşluk olduğunun anlamına gelir.

margin-right: 2px;

Bu komutumuz ise bölmelerin soldan sağa doğru dizildiğini belirtir.

float:left;

Şimdi ise Div id lerimizi yazıyoruz.

<div id="dis_bolme">
<div class="ic_bolme">Bölme1</div>
<div class="ic_bolme">Bölme2</div>
<div class="ic_bolme">Bölme3</div>
</div>

Evet arkadaşlar görünüm böyle olacaktır;



Div'lerinizi yukarıdan aşşağıya Dizmek istiyorsanız, Float seçeneği "none" yapmalısınız;

float:none;

Yaptığımız yan boşluk Margin "left" yerine "bottom" yaptık aşağılardan boşluk vermek için. İsterseniz Margin komutunu "Left" olarak da ayarlıyabilirsiniz.

margin-bottom: 4px;

Bu şekilde yaparsanız bölmelerin altından 4'er px lik boşluk olacaktır.
Görünüm şöyle olacaktır;



Kolay gelsin.