Footer por debajo

[RaulCDT]

¿Porque se me ve el footer por debajo del contenido de la hoja?

Código CSS:

#contenedor {
  display: table;
  overflow: hidden;
}
 
#contenidos {
  display: table-row;
}
 
.columna1 {
    float: left;
    width:670px;
    background: #FFF;
    min-height: 335px;
}
.columna2a {
    float: right;
    width:325px;
    background: #000;
    min-height: 500px;
}
 

Y el footer

Código CSS:

#pie {text-align: center;
background-color: #1f2024;
color: #fff;
height: 3em;
margin-top: -3em;
}
.ejemplo {position:relative; top: 0.5em;
font-size: 1em;
}