Estou fazendo um trabalho para a faculdade onde fomos instruídos a aproveitar as novas tags semânticas do HTML5 (nav, section, footer, etc). Estou tendo problemas em fixar o footer ao fim da página. Já tentei usando CSS e jQuery, porém nada chegou próximo do resultado.
Esse é o código de uma das páginas:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pizzaria Bolonha</title>
<link href="./css/styles.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/jquery.cycle2.min.js"></script>
</head>
<body>
<nav>
<ul>
<li><img src="images/small_logo.png"/></li>
<li><a href="./home.html">Home</a></li>
<li><a href="./pizzaria.html">A pizzaria</a></li>
<li><a href="./horarios_precos.html">Horários e preços</a></li>
<li><a href="./sabores.html">Sabores</a> </li>
<li><a href="./bebidas.html">Bebidas</a></li>
<li><a href="./contato.html" class="last">Contato</a></li>
</ul>
</nav>
<section>
<div class="middle"> <br/>
<center>
<img src="./images/logo.png"/>
</center>
<br/>
Em um ambiente confortável e aconchegante, a Pizzaria Bologna traz a você os melhores e mais variados sabores da mais deliciosa pizza italiana. Por aqui, priorizamos o atendimento de qualidade, o bem-estar e um sabor único. Nossas pizzas combinam sabores aprovados por pizzaiolos apaixonados com ingredientes selecionados cuidadosamente por uma nutricionista experiente, trazendo uma experiência gastronômica única.</div>
</section>
<footer>Pizzaria Bologna | Avenida Presidente Wenceslau Braz, 1172 - Guaira. Curitiba - PR | (41)3213-5200</footer>
</body>
</html>
E esse é o CSS que estou usando:
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #DDD;
}
h2 {
padding: 0;
margin: 0;
border: 0;
font-size: 20px;
}
section {
width: 100%;
overflow: auto;
font-size: 16px;
padding-bottom: 60px;
}
.middle {
width: 1200px;
margin: auto;
text-align: justify;
}
footer {
clear: both;
padding-top: 20px;
background-color: #a20e06;
width: 100%;
height: 40px;
color: white;
text-align: center;
font-size: 16px;
position: relative;
margin-top: -40px;
}
nav {
background-color: #06a20e;
height: 80px;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
nav a {
background: transparent;
color: white;
display: block;
font: 20px/80px 'Open Sans';
padding: 0 25px;
border-right: solid 1px #07b30f;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
nav a.last {
border-right: none;
}
nav li:hover a {
background: #07b30f;
}
iframe {
width: 100%;
height: 400px;
border: 0;
float: right;
}
#gallery {
width: 990px;
margin: auto;
}
#gallery img {
border: 2px solid white;
box-shadow: 0 0 5px #333;
margin: 1px;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#gallery img:hover {
border: 2px solid #06a20e;
}
O que posso fazer para corrigir o erro e também melhorar a estruturação do site?