Sıralama sorunu

Merhaba,

2 gündür çözemediğim bir sorun var.

Anasayfa div'inde yanyana 3 sütun göstermek istiyorum. Ama soldaki 2 sütun yanyana olmasına rağmen en sağdaki onların altında kalıyor.

Kodlar şu şekilde;

HTML

<div id="anasayfa">

<div id="soltaraf">
text
</div>

<div id="haber">
text
</div>

<div id="sagtaraf">
text
</div>

</div>

CSS

#anasayfa {
    overflow:hidden;
    width:100%
    }
    
#haber {
    width:500px;
    padding:10px;
    margin-left:185px;
    margin-right:205px;
    border:1px solid #111;
    }

#soltaraf {
    float:left;
    width:160px;
    display: inline;
    margin-left:10px;
    height:%100;
    }
 
#sagtaraf {
    float:right;
    width:185px;
    display: inline;
    margin-right:10px;
    border:1px solid #111;
    }

Sorunlu görünüm;



Ne yapmam gerek yardımcı olur musunuz?

Teşekkürler.

#anasayfa {
       overflow:hidden;
       width:100%
       }
    
#haber {
	float: left; 
	width:500px;
	border:1px solid #111;
	margin-left:15px;
	margin-right:15px;
        }

#soltaraf {
	float: left; 
	width:160px;
        display: inline;
        margin-left:10px;
        height:%100;
	border:1px solid #111
	}


#sagtaraf{
	float: left; 
	width:185px;
        display: inline;
        margin-right:10px;
        border:1px solid #111;
	}

#haberdeki marginlerin bunlar olduğuna eminmisin çok fazla bunlar;

margin-left:185px;
margin-right:205px;

Küçük bir değişiklikle giderebilirsin. Ortadaki div ortalandığı için diğer divlerin önünde kalıyor. Dolayısı ile sağ ve sol divin kodlarını öncelikli olarak kullanman gerek.Şu şekilde;

<div id="anasayfa">

<div id="soltaraf">
text
</div>

<div id="sagtaraf">
text
</div>

<div id="haber">
text
</div>

</div>

Ayrıca haber divini sağ ve soldan ortalamak için margin-left:auto; margin-left:auto; özelliklerini kullanmak her çözünürlükte sağlıklı sonuca ulaşmanı sağlayacaktır.

Çok teşekkür ederim. Aşağıdaki değişiklikle hallettim;

<div id="anasayfa">

<div id="soltaraf">
text
</div>

<div id="sagtaraf">
text
</div>

<div id="haber">
text
</div>

</div>