[HTML]Pozycjonowanie się elementów na stronie

Cześć!

Jako że E14 już puka w okienko, zabrałem się solidnie za naukę i napotkałem na pierwszy problem. Tworząc stronę HTML oraz upiększając ją za pomocą CSS, wszystko na mojej stronie nakłada się na siebie.

Co jest zadziwiające, robię jeden z arkuszy wraz z jego rozwiązaniem (plikiem rozwiązań), na którym wszystko wygląda dobrze, choć u mnie jest wszystko identycznie zbudowane.

U mnie wyglada to tak (strona HTML zbudowana na moim pliku):

..., zaś na pliku z rozwiązania, tak:

Poniżej zamieszczam swój kod HTML/CSS oraz ten, z rozwiązania:

Mój HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Portal Ogloszeniowy</title>
<link rel="stylesheet" type="text/css" href="styl5.css">


</head>
<body>

<div id="baner">
<h1>Portal Ogloszeniowy</h1>
</div>
<div class="info">                     
<img src="logo-male.png">
</div>
<div class="info">
	<h3>Adres</h3>
	<p>ul.Morska 45 Gdynia</p>
</div>
<div class="info">
	<h3>telefon</h3>
	<p>601601601</p>
</div>
<div class="info">
	<h3>e-mail</h3>
	<p>ogloszenia@poczta.pl</p>
</div>
<div id="lewy">
<h2>Ceny ogloszeń</h2>
<table>
<tr>
	<td>Liczba ogłoszeń</td> <td>Cena ogloszenia</td> <td>Bonus</td>
</tr>
<tr>
	<td>1-50</td> <td>2 PLN</td> <td rowspan="2">Subskrypcja newsleta to upust 0,20 PLN na ogloszenie</td>
</tr>
<tr>
	<td>51 i wiecej</td>	<td>1PLN</td>
</tr>
</div>
<div id="srodkowy">
<h2>Witamy na stronie naszego portalu!</h2>
<img src="logo-duze.png" alt="ogloszenia">
</div>
<div id="prawy">
<h2>Ile kosztuje ogloszenie</h2>
Podaj liczbe ogłoszeń: <input type="number" id="num">
<input type="checkbox" id="check">Policz upust na newsletter
<input type="submit" value="Oblicz" id="check" onClick="obliczanie">
</div>
<div id="stopka">
Portal ogloszeniowy opracowal: 123123123
</div>
</body>
</html>

Mój CSS:

body,html
{
	margin: 0px;
	padding: 0px;
}


#baner
{
	background-color: #009999;
	color: white;
	text-align: center;
	height: 80px;
	
}

.info
{
	font-family: Arial;
	color: white;
	background-color: #009999;
	text-align: center;
	height: 150px;
	width: 25%;
	float: left;
}

#lewy
{
	background-color: #669999;
	width: 30%;
	height: 600px;
	float: left;
}

#srodkowy
{
	background-color: #99CCCC;
	width: 40%;
	height: 600px;
	text-align: center;
	float: left;
}

#prawy
{
	background-color: #669999;
	width: 30%;
	height: 600px;
	float: left;
}

#lewy table, td
{
	
	border: 1px solid green;
	text-align: center;
}

#stopka
{
	background-color: #009999;
	color: white;
	text-align: right;
	clear: both;
}

#check
{
	background-color: green;
	color: white;
	margin: 10px;
	border: none;
}

---------------------------------------------

Rozwiązanie HTML:

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Portal ogłoszeniowy</title>
	<link rel="stylesheet" type="text/css" href="styl5.css">
	<script type="text/javascript">
		function obliczanie()
		{
			var x=document.getElementById("num").value;
			var suma=(x*2)-(0.1*2*x);
			var suma2=(x*1)-(0.2*1*x);
			
			if (x>=1 && x<=50 && document.getElementById("check").checked==false) 
			{
				document.getElementById("wynik").innerHTML="Koszt ogłoszeń: "+x*2+ " PLN";
			}
			else if (x>=1 && x<=50 && document.getElementById("check").checked==true)
			{
				document.getElementById("wynik").innerHTML="Koszt ogłoszeń: " + suma + " PLN";
			}
			else if (x>=51 && document.getElementById("check").checked==false)
			 {
			 	document.getElementById("wynik").innerHTML="Koszt ogłoszeń: "+x*1+" PLN";
			 }
			 else if (x>=51 && document.getElementById("check").checked==true ) 
			 {
			 	document.getElementById("wynik").innerHTML="Koszt ogłoszeń: "+suma2+" PLN";
			 }
			 else
			 {
			 	document.getElementById("wynik").innerHTML="Wprowadź dane";
			 }
		}
	</script>
</head>
<body>
<div id="baner">
		<h1>Portal Ogłoszeniowy</h1>
</div>
<div class="info">
	<img src="logo-male.png">
</div>
<div class="info">
	<h3>Adres</h3>
	<p>ul.Morska 45 Gdynia</p>
</div>
<div class="info">
	<h3>telefon</h3>
	<p>601601601</p>
</div>
<div class="info">
	<h3>e-mail</h3>
	<p>ogloszenia@poczta.pl</p>
</div>
<div id="pl">
	<h2>Ceny ogłoszeń</h2>
		<table>
			<tr>
					<td>Liczba ogłoszeń</td> <td>Cena ogłoszenia</td> <td>Bonus</td>
			</tr>
			<tr>
					<td>1-50</td> 			 <td>2 PLN</td>           <td rowspan="2">Subskrypcja newslettera to upust 0,20 PLN  na ogłoszenie</td>
			</tr>
			<tr>
					<td>51 i więcej</td>	 <td>1 PLN</td>           
			</tr>
		</table>
</div>
<div id="ps">
	<h2>Witamy na stronie naszego portalu!</h2>
	<img src="logo-duze.png" alt="ogłoszenia">
</div>	
<div id="pp">
	<h2>Ile kosztuje ogłoszenie?</h2>
	Podaj liczbę ogłoszeń: <input type="number" id="num"> <br>
	<input type="checkbox" id="check"> Policz upust na newsletter <br>
	<input type="submit" value="Oblicz" id="przycisk" onclick="obliczanie()">
	<p id="wynik"></p>
</div>
<div id="stopka">
	Portal ogłoszeniowy opracował: 00000000000
</div>


</body>
</html>

Rozwiązanie CSS:

body,html
{
	margin: 0px;
	padding: 0px;
}
#baner 
{
	background-color: #009999;
	color: white;
	text-align: center;
	height: 80px;
}
.info
{
	font-family: Arial;
	background-color: #009999;
	color: white;
	text-align: center;
	width: 25%;
	height: 150px;
	float: left;
}
#pl 
{
	background-color: #669999;
	width: 30%;
	height: 600px;
	float: left;
}
#pp
{
	background-color: #669999;
	width: 30%;
	height: 600px;
	float: left;
}
#ps
{
	background-color: #99CCCC;
	width: 40%;
	height: 600px;
	text-align: center;
	float: left;
}
#stopka
{
	background-color: #009999;
	color: white;
	text-align: right;
	clear: both;
}
table,td
{
	border: 1px solid green;
	text-align: center;
}
#przycisk
{
	border: none;
	margin: 10px;
	background-color: green;
	color: white;
}

Co mogę robić źle?