Kategori Dışı

Css İle Yan Yana Div Yerleştirmek

HTML ye css ile kullanmaya alıştığımız div kodlaması bizi çoğu zaman büyük zahmetlerden kurtarmıştır. Fakat bazı zamanlarda ise tam bir baş belası olmuştur. Örneğin iki div kodlamasını aynı sayfada yan yana çalıştırmak çoğu zaman webmasterlar için günün sorusu olmuştur. Halbuki o okadar da zor bir olay değildir. İki veya daha fazla div kodlamasını yan yana çalıştırmak için gerekli olanlar bir adet ana div kodlaması ve içine serpiştireceğimiz div parçacıkları. Aşağıdaki adımları izleyerek kolayca iki veya daha fazla div kodlamasının nasıl yan yana çalıştıracağınızı öğrenebilirsiniz.

<div id="ana_div">
<div class="div" id="div">HDuman.Com - 1.Div</div>
<div class="div" id="div2">HDuman.Com - 2.Div</div>
<div class="div" id="div3">HDuman.Com - 3.Div</div>
</div>
 
 #ana_div {
	height: 300px;
	width: 970px;
	margin-right: auto;
	margin-left: auto;
	background-color: #666666;
}

.div {
	float: left;
	height: 200px;
	width: 303px;
	margin: 10px;
	color: #FFFFFF;
}


 

Hepsi bu kadar 3 adet div kutucuğu oluşturduk.

Yorum

  • çok sağolasın hocam. ben de kendi kendime öğreniyorum bi 5 6 senedir. ama bu 3 div yanyana gelince sapıtması beni deli ediyor. ya birinden yardım alıyordum ya da kendim 1 div sola 2 divi de bir başka div içine alıp onu sağa alıp çözüyordum ama bu da kod kirliliğinden başka bişi değilmiş. bu arada sadece
    .div {
    float: left;
    }
    kodu yeterli oldu benim için.

  • divleri genişliklerini hesaplamadan yanyana yazıyor misal navigasyon icin 250px bi divim var bide içerik için730px margin kullandığım zaman yerleri sapıtıyor. sorunuma çözüm yazana şimdiden çok teşekkürler.

  • mehmet kardeşim tam olarak ne demek istedın anlamadım daha detaylı yazarsan ve kodlarını yazarsan düzeltip yayınlarım.

  • hocam merhabalar. bir konuda yardımına ihtiyacım var. bi sitemde video önüne iki tane reklam eklemek istiyorum. panelden eklediğim zaman alt alta duruyo. yan yana eklemek için ne yapmalıyım. teşekkürler…

  • merhaba cem; koydugun reklamların yan yana boyutu sayfaya sığıyorsa yani width aşmıyorsa soldaki reklamın css kodlarına “float:left” eklemen yeterli olacaktır.

Düşüncelerinizi Paylaşın