FSahin adlı üyeden alıntı: mesajı görüntüle
Css flex yöntemini araştırın. En basit bu şekilde yaparsınız. Mobilde olduğum için detaylı bilgi veremiyorum.
Hocam cok yeniyim daha kafamı iyice karıştıracak bi şey değil de mi bu ?

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 16:32:23 -->-> Daha önceki mesaj 16:22:12 --
Hunper adlı üyeden alıntı: mesajı görüntüle
şöyle örnekleyeyim 

<div class="genelcontent">
   <div class="div1"></div>
   <div class="div2"></div>
   <div class="div3"></div>
       <div class="ayri-icerik">
          Bu kısam yanyana 3 kutu haricinde bir içerik eklenecek, aynı zamanda contentin içinde bulunsun istiyorsun.
       </div>
</div>
bu şekilde float:left kullanırsan 4. div elemanı yani ayri-icerik önceki elemanın float:left özelliğine göre davranır ve kaymalar yaşanabilir. Bunu engellemek için 3. elemandan sonra temizleme işlemi yapıyoruz. Senin çalışmanda footer için yapmış olduk evet. Bunu yapman her zaman sağlıklı olacaktır. yükseklik değerini de "height: 100px" gibi piksel olarak belirleyebilirsin. ancak height kullandığın zaman bazı şeyleri de eşzamanlı düşünmen gerek. örneğin o kısma eklenecek içerik 100px'den büyük ise ne olacak ? bu durumda aşağı doğru genişlesin istiyorsan min-height kullanman daha mantıklı olacaktır height yerine. veya içerik 100px yüksekliğin içinde scrollbar ile kaydırılsın istiyorsan overflow-y: auto eklemelisin. Ya da uzayan içerik tamamen görünmesin dersen overflow:hidden eklemelisin. sağlıklı sonuçlar için bunları eşzamanlı düşünmen gerek.


Hocam çok teşekkür ederim zaman harcayıp cevap veriyosunuz dediklerinizi yaptım ama sonuc şöyle oldu: http://prntscr.com/g78jnb



Kodları da yazayım


<!DOCTYPE html>
<html>
	<head>
		<title> index sitesi denemesi</title>
		<link href="main.css" rel="stylesheet" type="text/css" />
	</head>

	<body>

  <header>
		<div>
			<ol>
				<p style align="center" ;  > Menü </p>
				<li><a href="/elma.html"> Elma </a></li>
				<li> Armut </li>
				<li> Kavun </li>
				<li> Karpuz</li>
			</ol>
		</div>
    </header>
		
    	<hr>
      <content>
		<div id="div1">
			<p>

			 Hr Altındaki paragraf <br>
			 Bu da br etiketiyle alt satırda yazdığım cümle <br>

			 	<p style="color:red"> bu da kırmızı yazılı bir paragraf </p>

			 </p>

			 <details> Deneme detayları </details>
			 <input type="textbox" name="denemetext">
    </div>


<div id="div2">   


<p> div2 </p>

</div>


<div id="div3">
  
<p> div3  </p>

</div>


    </content>





    <footer>
      


      
    </footer>


	</body>
</html>



  

p { color:red ; }

header {
	
	background-color: #DCDCDC ; 
	padding:5px ;
	border: 1px solid ; 
	width:150px ; 

}

 #div1	{
 	background-color: red;
	width: 100px;
	border: 1px solid
	float:left;

}

 #div2 {
 	background-color: green;
	width: 100px;
	border: 1px solid
	float:left;
}


 #div3 {
 	background-color: blue;
	width: 100px;
	border: 1px solid
	float:left;

}

#div3:after { clear:both }