CSS'de ufak bir sorun yaşıyorum

Merhaba arkadaşlar, yeni CSS öğrenmeye çalışıyorum. Bir çizim yaptım ve gayet başarılı bir şekilde anasayfasını döktüm. Hakkımızda sayfasında main tagını açıp, içine iki tane div açtım. Sidebar ve içerik diye, float veriyorum right ve left olarak fakat her iki divi de birleştiriyor niyeyse. Daha sonra her ikisini de float left yapıp sağa margin verdim, bu kez de aşağıya attı... Sebebi ne olabilir?

	<main>

     <div class="main"> 
	      <div class="main-ic">	
	     <div class="sidebar">
		     <div class="sidebar-kutu">deneme</div>
			 
		</div>
	 
	     <div class="icerik">
		     <div class="icerik-kutu">deneme</div>

		 
		 </div>
	 
	 </div>
	</div>
     </main>

.sidebar {
     width: 200px;
	 float: left;
	 height: auto;
	 margin-right: 20px;
	 }

.sidebar-kutu {
     width: 200px;
	 background: #fff;
	 margin-right: 20px;
	 }	 

.icerik-kutu {
     width: 700px;
	 background: #fff;
	 }	 
	 
.icerik {
     width: 700px;
	 height: auto;
	 float: left;
	 }	 

.main-ic {
     width: 1050px;
	 }

Görüntü:

<div style="clear:both;"></div>

dener misin. Ayrıca divlerde position:Relative kullanmanı tavsiye ederim

Clear bot var öncesinde ve sonrasında şu an. Bir şey fark etmemişti.

Position: relative olayını hiç kullanmadım. Daha ilk denemem de, o yüzden yeni öğreniyorum. Deneyeyim hemen.

Teşekkürler

Edit: Yok, hala yapamadım.

Bak şimdi

<div id="kapsa">
<div id="icerik">icerik</div>
<div id="sidebar">sidebar</div>
<div class="clear"></div>
</div>

bir kapsayıcım var bu kapsayıcı içerisinde bir icerik birde sidebar bolumum var ve float:left; , float:right; kurallarını temizlemek için clear class'ı var bunların css kısmı ise ;

#kapsa{
position:relative;
margin:0 auto;
width:900px;
height:500px;
}
#icerik{
position:relative;
float:left;
width:300px;
height:500px;
}
#sidebar{
position:relative;
float:right;
width:550px;
height:500px;
}
.clear{
clear:both;
}

yani mantık olarak bir kapsayıcı bunun ıcerısınde bır icerik birde sidebar var bunlar kapsayıcı dıvın yanlarına yapısık sekılde bu senın için bir örnek olur umarım.

Çok teşekkür ederim, şu an oldu gayet güzel.

Peki div class ile div id arasındaki fark ne?

Bir de ben css kısmında başa nokta koyuyordum, sen # koydun, onun olayı nedir?

# (diez ) id'yi temsil ediyor.
. ( dot ( Nokta ) ) class'ı temsil ediyor.

. (class) birden fazla yerde kullanılan div'lere verilir.
# ( id ) bir sefer kullanılan divlere verilir.

Mesela 8 tane yanyana kutu koyacaksın boyutları vs aynı olan bunu class ile yaparsın id ile olmaz çakışma yapar kullanamazsın.

Anladım. Vallahi süper bilgiler. Çok teşekkür ederim. Sağolasın

Rica ederim , yakında blog aktif hale getireceğim imzadaki sitenin orada bu ve buna benzer ipuçlarıda olacak. ( çaktırma kendi bildiklerimi unutursam girip bakmak için açıyorum )
hayırlı geceler kardeşim

Mutlaka takip edeceğim, teşekkürler. İyi çalışmalar dilerim.