Problema con imagen del footer

[guillem_serra]

Hola. Tengo un problema que me tiene un poco desesperado. Tengo un div "footer" con una imagen de fondo, y dentro de ese div tengo otro div con los contenidos escritos. He intentado anclar el footer abajo de la pagina, pero solo consigo que queden anclados los contenidos, mientras que la imagen queda a mitad de la pantalla. No se que hacer. Dejo el HTML del footer y el css:

Código HTML:

<div id="pie">
                <div id="datostienda">
                    <p><b>© Instalacions Lavilla Calahorra</b></p>
                    <p>c/ Manila 43 Tda - 08034 Barcelona</p>
                    <a href="mailto:[email protected]" title="Contactar con instalaciones Lavilla-Calahorra"><p>[email protected]</p></a>
                    <p>Teléfono: 93 203 69 59</p>
                    <p>Fax: [phone]</p>
                    <a href="#" title="Ley Organica de Protección de Datos"><p>LOPD</p></a>
                    </div>
                    <div id="barravertical">
                        <img src="imagenes/barravertical.gif"/>
                    </div>
                    <div id="pie_otros_contenidos">
                        <a href="#"><p>Inicio</p></a>
                        <a href="#"><p>Mapa web</p></a>
                        <a href="#"><p>Contactar con nosotros</p></a>           
                    </div>
                </div>
            </div>
 

El CSS es el siguiente

Código CSS:

#pie p {
    color: #d4d4d4;
    font-size:13pt;
    font-family: ebrima;
}
 
#pie a p:hover {
    color: black;
}
 
#datostienda {
    float: left;
    margin-right: 35px;
    line-height:10px;
}
 
#barravertical {
    width: 2px;
    height: 180px;
    float:left;
    margin-top: 15px;
    margin-right: 35px;
}
 
#pie_otros_contenidos {
    float: left;
    margin-right: 35px;
    line-height:10px;
}