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 --
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 }
Aksine çok kolaydır.
Örnek:
https://jsfiddle.net/pe340a7t/