Mon footer passe sous ma carte google maps.

Bonjour à tous,
J'ai un problème lors de l'utilisation de l'API Google Maps: lorsque la résolution de l'écran se réduit, le footer se rapproche de la carte, jusqu'à lui passer dessous.
Le passage qui pose problème:

<section class="contact">
       <article class="contact">
       <h3>Nous contacter</h3>
       <p>Une question, une interrogation, besoin de plus d'informations? N'hésitez pas à nous contacter à ces coordonnées:</p>
                  <div class="carte">
                  <div id="map_canvas" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
                   <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
                  </div>
                  </div>
         </article>
</section>
<footer>
        <p class="align-droite">
         <span>Analyse de nos farines</span>
         Espace pro
         </p>
</footer>
</body>
</html>

Et le css qui va avec:

footer{
	width:100%;
	font-family:'karla';
	text-align:right;
	margin-top:1%;
}
.carte{
	height:95%;
	margin-bottom:3%;
}

Quelqu'un a une idée ?
Merci d'avance.

Salut,

C'est quoi qui te pose problème le fait que le footer se déplace jusque là ou qu'il passe dessous ?

Sinon sur ton footer un simple :

footer {
position: relative;
z-index: 2;
}

devrait suffire.

Par contre si c'est le fait que le footer se déplace jusqu'à ta map il faudrait que tu nous montres un peu plus de CSS histoire de bien cerner la chose.