css ile divleri yanyana koyamıyorum

[Php Kolik]

arkadaşlar css ile tasarıma yöneldim.Ben tablolarla çalışan biriydim.Yeni standartlara göre artık demode oldu bildiğiniz gibi.Şimdi benim şöyle bir sorunum var ana sayfada 4 tane div ve bunların içinde haberler var.Fakat ben bunları yanyana bir türlü koyamadım üst üste geliyorlar.Aşağıda resmini görüyorsunuz:


Bunları yanyana ve aralarında 2px boşluk olacak şekilde nasıl yerleştiririm.Birde şurda takıldım.Sol taraftaki kutular float:left sağdakiler float:right olarak ayarlı.Ben ortaya bir kutu daha eklemek istesem nasıl yapacağım.
Buda kullandığım kod:

<divstyle="float:left;width:200px;height:90px;background:#fff">
<divstyle="padding:2px;background:#FF00FF;margin-bottom:2px;border:solid 1px #000">Başlık</div>
<divstyle="border:dotted 1px #000;color:black;padding:2px;">
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
<asp:HyperLinkrunat="server"NavigateUrl="~/Default.aspx">Devamı...</asp:HyperLink>
</div>
</div>
<divstyle="margin-bottom:2px;float:right;width:200px;height:90px;background:#fff;">
<divstyle="padding:2px;background:#FF00FF;margin-bottom:2px;border:solid 1px #000">Başlık</div>
<divstyle="border:dotted 1px #000;color:black;padding:2px;">
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
<asp:HyperLinkID="HyperLink1"runat="server"NavigateUrl="~/Default.aspx">Devamı...</asp:HyperLink>
</div>
</div>
<divstyle="margin-top:2px;float:left;width:200px;height:90px;background:#fff">
<divstyle="padding:2px;background:#FF00FF;margin-bottom:2px;border:solid 1px #000">Başlık</div>
<divstyle="border:dotted 1px #000;color:black;padding:2px;">
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
<asp:HyperLinkID="HyperLink2"runat="server"NavigateUrl="~/Default.aspx">Devamı...</asp:HyperLink>
</div>
</div>
<divstyle="margin-top:2px;float:right;width:200px;height:90px;background:#fff;">
<divstyle="padding:2px;background:#FF00FF;margin-bottom:2px;border:solid 1px #000">Başlık</div>
<divstyle="border:dotted 1px #000;color:black;padding:2px;">
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik Haber İçerik 
<asp:HyperLinkID="HyperLink3"runat="server"NavigateUrl="~/Default.aspx">Devamı...</asp:HyperLink>
</div>
</div> 

Yardımlarınızı bekliyorum.

[KaravanaBatu]

Katmanları yanyana koyma hakkında minik bir kod parçası koydum. Hepsine float:left; koyup margin ile aralarındaki uzaklığı belirtebilirsin.

CSS KODU:

.div1, .div2, .div3, .div4{
	float:left;
	margin-left:5px;
}
.div1{
	background-color:#666666;
}
.div2{
	background-color:#339966;
}
.div3{
	background-color:#FF0000;
}
.div4{
	background-color:#66CC66;
}

HTML KODU:

<div class="div1">Deneme1</div><div class="div2">deneme2</div>
<div class="div3">deneme3</div><div class="div4">deneme3</div>

Sana tavsiyem kodlarındaki ayrıntıları (border özellikleri, renkleri, diğer betikler vs) katmanlarındaki temel özellikleri (yerlerini, diğer nesnelerle olan boşlukları, vs) ayarladıktan sonra tanımla ki bu da daha hızlı yol almanı sağlar. Yani önce taslak sonra ayrıntı...

Kolay Gelsin...

[Php Kolik]

Verdiğiniz kodları inceledim ve uyguladım.Teşekkür ederim dakat hala istediğim gibi olmadı.Yanyana sorunsuz bir şekilde dizildiler ama alt alta dizilişte hala sorun var.Şimdide aşağıdaki görünümü aldı.

[selfblood]

Div içine div etiketi olunca ve float verilmişse böyle sorun oluyor. Bunun için clear kullanılabilir. Yani:

PHP Kodu:

<div style="float:left;">
   <div>Başlık</div>
   <div>Yazı yazı yazı</div>
   <div style="clear:both;"></div>
</div>
<div style="float:left;">
   <div>Başlık</div>
   <div>Yazı yazı yazı</div>
   <div style="clear:both;"></div>
</div> 


[Php Kolik]

Selfblood bu şekildede olmuyor malesef.Divler hala üst üste duruyor.Ben şu şekilde bir çözüm getirdim.İçerik sayfasınıda 2 divle böldüm üst taraftakine 2 kutu alt taraftakine iki kutu koydum sorun çözüldü.Aynı sorunu yaşayan arkadaşlara duyrulur.

[SrcnCkr]

Birine örnek olsun diye gelişmiş bir DIV kolonlama yazmıştım. Biraz incelersen fikir kazanabilirsiniz;

http://rapidshare.com/files/53825643/index.html

[Php Kolik]

Ben çözümü buldum ama seninkinide indirip inceliyeyim farklı fikirler verebilir.