Html Css Yardım

öncelikle herkese selamlar kolay gelsin




Arkadaşlar yukarıda gördüğünüz resmin yanına almak istiyorum yazıları ve facebook iconunu float:left; yaptım ama yinede yanına gecmedi neden acaba cöze bilirmisiniz mantığını anlamam lazım öylesine yazıyorum siteyi, kodlarıda yazıyorum simdiden yardımcı olan herkese teşekkürler


Css Kodlar

haberdıs {
	width:80%;
	margin:auto;
}

.haberler {
	width:30%;
	float:left;
	
	
}

.haberbaslik  {
	border-bottom:1px solid black;
	margin-bottom:15px;
}
.haberbaslik p {
	margin-bottom:10px;
}

.haberresim img {
	width:190px;
	height:110px;
	float:left;
}
.haberyazi {
	float:left;
}

.sosyal {
	float:left;
}

Html Kodlar

<div class="haberdıs">	
	<div class="haberler" >
	<div class="haberbaslik">
		<p>Haberler</p>
	</div>
			<div class="haberresim">
				<a href=""> <img src="11.jpg"</a>
			</div>
				<div class="haberyazi">
					<p> buraya yazı yazmak güzeldir güzell <br> ama sen güzellikten anladığın faın</p>
				</div>
					<div class="sosyal">
						<img src="facebook.png" />
						<img src="whatsapp" />
						<span> 21 kasım 14:00</span>
					</div>
				<div class="temizle"> </div>
	</div>
</div>

jsfiddle üzerinden paylaşırsanız yardımcı olalım.

display webkit-box

bu şekilde anlaya bilirmisin hocam



nereye yazıcam

çalıştığınız sayfanın linkini atarsanız yardımcı olabilirim engelliyen başka bi kod satırı olabilir

http://jsfiddle.net/cfghsjrw/

float:left kullanımı yerine position:relative deneyin ve de yazı divini resim divinin üstüne koyabilirsiniz masaüstüne geçince daha detay verebilirim.

çalıştığım dosyalarımı atayım hocam dosyaları atıcaksam nereye yükliyeyim acemiyimde 1 hafta oldu html css gireli kusura bakma yapmama gerekenleri adım adım söylersen yapoayım hocam



http://jsfiddle.net/cfghsjrw/1/

oldumu hocam doğru yapabilmişmiyim yeniyimde



hocam position biliyorum fakat ben normal olarak almak istiyorum ondan dolayı mantığını anlamak istiyorum yinede zahmet edip bilgi verdiğiniz için çok teşekkürler

hocam display flex in anlamı ne acaba mantığı ne