CSS ile siteyi ikiye bölme

Merhabalar,

Ben bi site tasarlıyorum full css olarak şimdi sitenin header bölümünü yaptım ortablok bölümü kaldı bu orta bloğu ben 2'ye bölmek istiyorum fakat bir türlü yapamadım sürekli bi sorunla karşılaşıyorum.Site ortalı halde Icerik_Govde için 920 px varsayılan genişliği verdim ve bu tag içinde bölmek istiyorum

<div id="Icerik_Govde">

<div id="SagBlok">

Sağ Blok <br> Sağ Blok

</div>

<div id="SolBlok">

Sol Blok <br> Sol Blok

</div>

</div>

Sitenin genel genişliği 920px ve bu taglar Wrapper tagımın içerisinde

Bazen internet explorer'da sorunsuz bölünen site bazen firefox'da sorun veriyor.Bazende tam tersi tam olarak nasıl yapabilirim

Cevaplarınız için şimdiden teşekkür ederim

CSS kodlarınızı buraya yazar mısınız
Ayrıca Sağ blok divinde gene sağ blok diye 2 kere yazdığınız kısmı yanlış bir biçimde ayırmışsınız alt satıra geçmesi için.Orayı <br> değil de <br/> diye yazmanız gerek.Aksi takdirde w3 hatası oluşur.

body {
	background-image: url(Resimler/bg.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
}
form {
	margin: 0px;
	padding: 0px;
	display: block;
}
td {
	font-family: Tahoma;
	font-size: 9px;
	font-style: normal;
	color: #000000;
	display: block;
}
#Wrapper {
	background-color: #FFFFFF;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#Header {
	background-color: #FFFFFF;
	display: block;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#Logo_Header {
	background-color: #FFFFFF;
	display: block;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: 100px;
}
#Menu {
	display: block;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#Menu_Menu {
	margin: 0px;
	float: left;
	width: 920px;
	display: block;
	height: 30px;
	padding: 0px;
	background-image: url(Resimler/Menu/menu_bg.png);
	background-repeat: repeat-x;
}
#Menu_Menu li {
	display: block;
	float: left;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	height: 30px;
	list-style-type: none;
}

#Menu_Menu ul {
	float: left;
	width: 800px;
	display: block;
	height: 30px;
	padding: 0px;
	margin: 0px;
}
#Menu_Menu a {
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 30px;
	text-decoration: none;
	padding-right: 10px;
	padding-left: 20px;
	display: block;
	background-image: url(Resimler/Menu/beyaz_ok.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#Menu_Menu a:hover {
	font-family: Tahoma;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	line-height: 30px;
	padding-left: 20px;
	display: block;
	background-color: #0272B0;
	padding-right: 10px;
}
.yan_cizgi   {
	border-right-width: 0px;
	border-right-style: dotted;
	border-right-color: #8F0A0A;
}
#Icerik_Govde {
	display: block;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#SolBlok {
	display: block;
	width: 300px;
	float: left;
}
#SagBlok {
	display: block;
	width: 620px;
	margin: 0px;
	padding: 0px;
}

#Footer {
	display: block;
	padding: 0px;
	width: 920px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-color: #666666;
	font-family: Tahoma;
	font-size: 11px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	height: 55px;
}

CSS Kodlarım bunlar

Hıc kodlarınıza bakmadan ben sıze işin mantıgını anlatayım.Siz hazırlayın olur mu? Pek vaktim yok cunku.

<div class="govde">
<div class="blok">Burası sol blok</div>
<div class="blok">Burası sag blok</div>
</div>

Bu senin html kısımın. Gelelim css kodlarına

.govde {width:924px;height:auto;margin:0px auto;} // Govde genişliğini 924px ayarlayıp yuksekliği otomatik yaptım.Margin degerine auto vererek gövdeyi ortaladım.
.blok{width:460px;height:auto;float:left;border:1p x solid red;} // blok genişliğini 460px verdim.Yani yarı yarıya böldüm ve gövde içinde sola yasladım.


Blokların kenarlıklarını bilerek renkli yaptım. çizgileri gormen için. CSS de öteleme mantığı şudur:

Bir gövde vardır ve genişliği bellidir. Bunun içerisine ornegin 300px genisliğinde 3 blok sıgarmı yan yana? sıgar. 4 tane koyunca ne olur? Bir alt satıra atar. 400px boyutunda 3 blok koyarsak ne olur? ilk satırda yan yana iki tane blok olur ve sag tarafta 120px lik bosluk olusur. Diger blokta alta atılır. Neden? Cunku 400px 120px lik bos alandan buyuktur.

Verdiğim orneği ele alırsak, 924px lik bir ana govdede 460px lik iki tane blok sola itelenerek yan yana alındı. Umarım anladın ?

Dene bakalım olacakmı

Sorun şu tam olarak açim şimdi site bölünüyor fakat iki tarayıcıda aynı olmadığını sölemiştim ilk mesajımda.Şimdi Wrapper tagımın backround rengi beyaz ve ortalı siteyi gayet güzel bi şekilde bölüyorum fakat aşağı doğru içerik arttıkça sitenin içeriği ile beyaz arkaplan inmiyor aşağıdaki resimdeki gibi görüntü çıkıyor ortaya :

Bu internet explorer'daki görünümü hiç bir sorun yok olmasını istediğim olay :



Buda firefox'daki görünümü sorunlu olan görünüm :

arka plan çorabı kaçmış bayan gibi duruyor dimi son divin bitmede önce
<div style="clear:both;"></div> koy düzelir

çok teşekkür ederim sorun çözüldü