Configuração básica de CSS?

Galera, preciso de uma ajuda bem básica, ate ignorante da minha parte.

Tenho este código:

<div class="wrapper">
<div class="imagem"><a href="EXEMPLO"><img src="EXEMPLO" alt="" /></a></div>
</div>

E este Css

body {

 white-space: nowrap;
}

.wrapper {
 width: 100%;
 height: 100%;
}

.wrapper .imagem {

 display: inline-block;
 width: 33%;
 padding: 0;
 margin: 0;
}

.wrapper .imagem img {

 width: 100%;
 height: auto;
 padding: 0;
 margin: 0;
}

Preciso grudar essas imagens.

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/DlpoZTF.png&key=113ceb9bd5853c656b55206e10b7062c8f4cb242b7c51f35b19e407f48b51be8" alt="DlpoZTF.png" />

Tenho o seguinte código para juntar as imagens.

.imagem {float:left !important;}

Mas não sei como configurar este código no meu. Sei que deve ser fácil mas estou meio perdido.

Ps: Acredito que este código vai juntar left mas não vai juntar com o rodapé. No entanto aceito qualquer tipo de ajuda.
Abraço e obrigado.

Resultado que pretendo ter:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/sS9n5FJ.png&key=c08ad1123d6e7d3aca2ef2a540c7c0bb78bd89e7973fab906496a97b1def816d" alt="sS9n5FJ.png" />