Attach a footer type element in the page footer

Navigation
5

I'm doing a job for college where we were instructed to take advantage of the new HTML5 semantic tags (nav, section, footer, etc). I'm having trouble fixing the footer at the bottom of the page. I've tried using CSS and jQuery, but nothing came close to the result.

This is the code for one of the pages: 

<!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>

And this is the CSS I'm using: 

@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;
}

What can I do to correct the error and also improve the structuring of the site?

    
asked by anonymous 06.06.2014 / 07:30

1 answer

5

This is a common question, and I do not know a "canonical" solution to this (most of what I see looks more like a gambiarra). A workaround is to put the entire contents of your page [except the footer] in a div pendent and make its minimum size equal to 100% :

HTML 

<body>
    <div id="container">
        <nav>
        ...
        </section>
    </div>
    <footer>
        ...

CSS 

#container { height: auto; min-height: 100%; }

Font (SOen) . Example in jsFiddle . Note: I set the margin-top of footer to -60px to take account of padding at the top. I do not know if I did it right, but the result looks okay (in the fiddle it's a bit tight, but when you widen the window it's fine).

Here's the same example with more content on the page . In this case, the footer continues at the bottom of the page, visible only when scrolling down. And needless to say, if you just want it to be always visible and below, just use position: fixed and leave an extra space on the main content so you can scroll to the end with nothing obscured.

    
06.06.2014 / 08:03
How to add snippets of 'dynamic code' HTML with JavaScript / jQuery How do I not insert repeated records?