se assegni float left al div #mappa, il footer ti verrà allineato con la mappa, già se inserisci #mappa all'interno di un altro div, il footer rimane a fondo pagina, mi pare che il tuo problema fosse questo.


codice:
<body>

<div id="titolo"></div>

<div id="menu">




</div>

<div> 
       <div id="mappa"></div>
</div> 

<div id="footer">

</div>

</body>
non so come ti vuoi organizzare la pagina ma già se inserisci #map in un div dovresti vedere il footer sul fondo della pagina invece che dove lo vedi ora. Rivediti bene la proprietà float.