Stopka brak przyklejenia do dolnej cześci ekranu

pytanie zadane 7 kwietnia 2016 w HTML i CSS przez KonDZIKs Bywalec (2,770 p.)
zamknięte 8 kwietnia 2016 przez KonDZIKs

Witam mam problem ze stopką. Chodzi o to ,że chce żeby była cały czas na dole a ona przesuwa mi się do zakończenia tekstu oraz to ,że można przesuwać stronę w bok.

Kod HTML

<!DOCTYPE>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Strona pokemon</title>
<meta name="description" content="Serwis poświęcony pokemonom dokładniej grze pokexgames."/>
<meta name="keywords" content="poki, tutorial, pokemony, rodzaje, pomoc, pokexgames tutorial, pokexgames poradnik"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="duzepudlo">
	<div class="naglowek">
		<div class="logo"><img src="pokemon.png">
		<div style="clear:both;"></div>
		</div>
	</div>
	<div class="menu">
		<ol>
			<li><a href="index.html">Strona główna</a></li>
			<li><a href="#">Pokemony</a>
				<ul>
					<li><a href="ogniste.html">Kanto</a></li>
					<li><a href="#">Jotho</a></li>
					<li><a href="#">Sinho</a></li>	
				</ul>
			</li>
			<li><a href="#">Przedmioty</a></li>
			<li><a href="#">NPC</a></li>
			<li><a href="#">Sale</a></li>
			<li><a href="#">Pomoc</a></li>
			<li><a href="#">Instalacja</a></li>
			<li><a href="#">O autorze</a></li>
		</ol>	
	</div>
	<div class="pudlo">
<p><font size="30px">NEWS:</font></p><br>
Dodanie spisu pokemonów<br>
Tekst o autorze<br>
	
	</div>
	<div class="stopka">PokeCity "Piiii Pikachuuuu" &copy; 2016</div>
</div>
</body>
</html>

Kod CSS

body
{
	background-color: #00ff33;
	color: #00009C;
	margin: 0;
}

.duzepudlo
{
	width: 100%;

}
.naglowek
{
	width: 100%;
	padding-top: 10px 0;
	padding-bottom: 20px 0;
}
.logo
{
	width: 800px;
	font-size: 48px;
	margin-left: auto;
	margin-right: auto;
}
.menu
{
	width: 100%;
	padding: 8px;
	background-color: #ffff33;
	text-align: center;
	border-top: 1px solid #336600;
	border-bottom: 1px solid #336600;
	border-top; 2px;
	font-family: 'Shadows Into Light Two', cursive;
}
.pudlo
{
	width: 1000px;
	margin-left:auto;
	margin-right: auto;
	background-color: #99ff66;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
}
.stopka
{
	text-align: center;
	background-color: #ffff33;
	color: black;
	padding-bottom: 10px;
	font-size: 16px;
	position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
	position:relative;
}
ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}
ol a
{
	color; white;
	text-decoration: none;
	display; block;
}
ol > li
{
	float: left;
	width: 150px;
	height: 38px;
	border-right: 1px dashed #FFC030;
}
ol > li:first-child
{
	border-left: 1px dashed #FFC030;
}
ol > li:hover
{
	background-color: #FFF200;
}
ol > li:hover > a
{
	color:#80C020;
}
ol > li > ul 
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}
ol > li:hover > ul
{
	display: block;
}
ol >li > ul > li
{
	background-color: #ffff33;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #FFC030;
}
ol >li > ul > li :hover
{
	background-color: #FFF200;
}

komentarz zamknięcia: Zanalezienie rozwiązania. :)