Dúvida no Ex. 4 da Aula 12 - Desafios finais | HTML5 e CSS3 I: Suas primeiras páginas da Web

Caros, resolvi o problema utilizando float porém não estou conseguindo ver o final da página. O rodapé fica em cima do final da página. como posso resolver?

port.css

.projetos {
    width: 45%;
    border: solid #000 8px;
    background-color: #FAFFFC;
    padding: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;    

}

img {
    width: 100%;
}

.projeto-1 {
    float: left;
}

.projeto-2 {
    float: right;    
}

.projeto-3 {
    float: left;
}

.projeto-4 {
    float: right;    
}

site.css


body {
    font-family: 'Crimson Text', serif;
    background-color: #F2FFFC;
    font-size: 120%;

    line-height:1.5;
}

h1, h2 {

    font-family: 'Open Sans Condensed', sans-serif;
}


.titulo-principal{
    font-size: 60px;
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 25px;
    border-bottom: 10px solid #000;
    text-transform: uppercase; /*só tem no meu */
}


main a {
    color: #851944;
}

p {
    text-align: justify;
    margin: 20px 0;
}

aside  {
 text-align: center;
 background-color: #3C1D3D;
 color: #F2FFFC;
 padding: 20px;
 box-sizing: border-box;

}

.menu-lateral, 
.minha-foto {
  float: right;
  width: 15%; 
}

.minha-foto {
    position: absolute;
    width: 300px;
    top: 0;
    right: 0;
}

.menu-lateral {
    position: relative;
    top: 300px;
}

main {
    float: left;
    width: 85%;
}

aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
    text-decoration: none;
}

aside h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

.rodape-pagina{
    background-color: #000;
    color: #F2FFFC;
    padding: 20px;
    clear: both;
    position: fixed;
    width: 100%;
    bottom: 0;
    left:0;
    box-sizing: border-box;
}

strong {
    font-weight: bold;
}
em {
    font-style: italic;
}

.icone-rede-social li {
    display:inline-block;
}

.links-barra-navegacao {
    text-transform: lowercase;
}

.icone-rede-social a{
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -9999px;
}

.github {
    background-image: url('imagem/github.png');
}

.twitter {
    background-image: url('imagem/twitter.png');
}
.linkedin {
    background-image: url('imagem/linkedin.png');
}

.conteudo h2 {
    font-size: 30px;
    clear: both;
}

.conteudo {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px 0px;
    padding-bottom: 80px;
}

portfolio.html

<!DOCTYPE html>
<html>
  <title>Portfolio</title>
  <meta charset="UTF-8"/>
  <link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/site.css" />
   <link rel="stylesheet" type="text/css" href="css/port.css" />

  <link rel="icon" href="imagem/favicon.png">
<head>
</head>
<body>

<main>
    <h1 class="titulo-principal">Portfolio</h1>

    <div class="conteudo">

        <p> Veja abaixo alguns projetos relevantes </p>


        <figure class="projetos projeto-1">
            <img src="imagem/bmw.png" />
            <figcaption>BWM.com: com reformulação de design e implementação do HTML, CSS e JavaScript</figcaption>
        </figure>


        <figure class="projetos projeto-2">
            <img src="imagem/uol.png" />
            <figcaption>Uol.com.br: reformulação do design e implementação do HTML, CSS e JavaScript</figcaption>
        </figure>

        <figure class="projetos projeto-3">
            <img src="imagem/ibm.png" />
            <figcaption>ibm.com.br: Ibm.com: aplicação de progressive enhamcement em conjunto com aplicação back-end</figcaption>
        </figure>    

        <figure class="projetos projeto-4">
            <img src="imagem/g1.png" />
            <figcaption>g1.com.br: reformulação de design e implementação do HTML, CSS e JavaScript</figcaption>
        </figure>    

    </div>


</main>

<img src="imagem/eu.jpg" alt="foto do João" class="minha-foto">

<aside class="menu-lateral">
    <h1> João da Silva </h1>
    <nav>
        <ul class="links-barra-navegacao">
            <li><a href="index.html">Home</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="bio.html">Sobre mim</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contato.html">Contato</a></li>
        </ul>
    </nav>

    <ul class="icone-rede-social"> 
        <li class="github"> <a href="https://github.com/joaodasilva"> github</a> </li>
        <li class="twitter"> <a href="https://twitter.com/joaodasilva"> twitter</a> </li>
        <li class="linkedin"> <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508"> linkedin</a> </li>
    </ul>
</aside>
<footer class="rodape-pagina">
    &copy;João da Silva 2014
</footer>

</body>

</html>

Mergulhe em programação