Float Uygulayamama Sorunu

Arkadaşlar bi script yazıyorum. Bunun için bir CSS kodladım. Ama bir bölümde bir türlü istediğim sonucu alamadım. Daha Doğrusu İE8 de istediğim sonuç oluyor ama Mozilla Firefox da olmuyor.
Html Kodlarım;

<div id="sayfa">
	<div id="sayfaIcerik">
		<div class="sol">
			<span class="bolumBaslik">Döviz<em>Kurları</em></span>
			<div class="icerik">Döviz Kurları Buraya</div>
			<span class="bolumBaslik">Hava<em>Durumu</em></span>
			<div class="icerik">Hava Durumu Buraya</div>
		</div>	
		<div class="sag">
			<span class="bolumBaslik">Ana<em>sayfa</em></span>
			<div class="icerik">Anasayfa Buraya</div>
		</div>
		<div class="temizle"></div>
	</div>
</div>

CSS Kodlarım;

body { background: #dadada url(images/bg.gif) repeat-x; margin: 0 0 0 0; }

#sayfa { background: #dadada url(images/icerikbg.gif); width: 808px; margin: 0 0 0 98px; padding: 2px 0 2px 0;}
#sayfaIcerik { width: 787px; margin: 0px 0px 0px 10px; font: bold 11px Tahoma; color:#4c4c4c;  }
.sol { border: 1px solid #000; width: 195px; font: bold 11px Tahoma; color:#4c4c4c; float: left; margin: 0 5px 5px 0; }
.sag { border: 1px solid #000; width: 581px; font: bold 11px Tahoma; color:#4c4c4c; margin: 0 0 5px 0; }
.icerik { font: bold 11px Tahoma; color:#4c4c4c; margin: 0 0 10px 0; }

#footer { background: #dadada url(images/footer.gif); width: 808px; height: 55px; text-align: left; margin: 0 0 0 98px;}

.temizle { clear: both; }
.bolumBaslik { font: bold 15px Tahoma; color:#4c4c4c; border-bottom: 2px solid #CCC;
padding: 0px 0px 4px 0px; margin: 0 0 0 0; text-transform: lowercase; }
.bolumBaslik em { font: bold 15px Tahoma; color:#a92e2e; }

Sorunu Çözebilecek yada neden kaynaklandığını bilen varsa yardım edebilir mi?
Eğer isteyen olursa Görüntü falan atabilirim ...

sorunu ekran görüntüsü ile gösterseniz daha kolay yardım alabilirsiniz

olan ve olmayan hali ile tabi

Bu Mozilla Firefox görüntüsü (İstediğim Gibi Olmayan)


Bu da İnternet Explorer 8 Görüntüsü. (İstediğim Gibi Olan)

sagbolum divini kapattıktan sonra sonra

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

ekleyip denermisin ?

sagBolum ü kapattıktan sonrada solBolum u kapattıktan sonra da ikisinide ayrı ayrı denedim. ama sonuç yok. Hala aynı :S

Yukarıda verdiğin html ve css kodlarına göre çıktıda herhangi bir sorun yok, ie7 ve ff de görünüm sorunsuz sanırım eksik kod verdin.

ilk mesajda kodları güncelledim tekrar. Yeniden bakabilirsiniz. Ne denediysem yinede olmadı. Hala aynı :S

<div class="sag">

Bu kodun üstüne

<div style="clear:left;" /> ekleyerek denermisin bide

bu kodları aynı şekilde koy bakalım olacaktır...



css kodu :

body { background: #dadada url(images/bg.gif) repeat-x; margin: 0 0 0 0; }
#sayfa { background: #dadada url(images/icerikbg.gif); height:150px; width: 808px; margin: 0 0 0 98px; padding: 2px 0 2px 0;}
#sayfaIcerik { width: 787px; height:150px; margin: 0px 0px 0px 10px; font: bold 11px Tahoma; color:#4c4c4c; }
.sol { border: 1px solid #000; height:150px; width: 195px; font: bold 11px Tahoma; color:#4c4c4c; float: left; margin: 0 5px 5px 0; }
.sag { width: 180px; font: bold 11px Tahoma; color:#4c4c4c; margin: 0 0 5px 0; }
.icerik { font: bold 11px Tahoma; color:#4c4c4c; margin: 0 0 10px 0; }
#footer { background: #dadada url(images/footer.gif); width: 808px; height: 55px; text-align: left; margin: 0 0 0 98px;}
.temizle { clear: both; }
.bolumBaslik { font: bold 15px Tahoma; color:#4c4c4c;
padding: 0px 0px 4px 0px; margin: 0 0 0 0; text-transform: lowercase; }
.bolumBaslik em { font: bold 15px Tahoma; color:#a92e2e; }



html kodu:

<div id="sayfa">
<div id="sayfaIcerik">
<div class="sol">
<span class="bolumBaslik">Döviz<em>Kurları</em></span>
<div class="icerik">Döviz Kurları Buraya</div>
<span class="bolumBaslik">Hava<em>Durumu</em></span>
<div class="icerik">Hava Durumu Buraya</div>
<div class="sag">
<span class="bolumBaslik">Ana<em>sayfa</em></span>
<div class="icerik">Anasayfa Buraya</div>
</div>
</div>
<div class="temizle"></div>
</div>
</div>