Float:left em imagem

Olá pessoal, tenho a seguinte página:

O bloco cinza é a div #resultado, o bloco vermelho eu coloquei só pra mostrar que uma div que vem em baixo tb entra em baixo da imagem, ou seja, a div espaco_usuario.

com o código:

<div id="resultado"><div id="usuario"><img src="usuarios/1.jpg" /><a href="#"><h2>Nome</h2></a><ul><li><strong>Cidade/UF:</strong> Cidade/UF</li><li><strong>País:</strong> BR</li><li><strong>Home Page:</strong> http://</li></ul><a href="#" class="link">link</a></p></div><div id="espaco_usuario"> </div><div id="usuario"><img src="usuarios/2.jpg" /><a href="#"><h2>nome 2</h2></a><ul><li><strong>Cidade/UF:</strong> Cidade/UF</li><li><strong>País:</strong> BR</li></ul><a href="#" class="link">site</a></p></div><div id="espaco_usuario"> </div></div>e a folha de estilo(resumo):

#resultado { margin:40px 0 0 0; font:normal 12px Verdana, Arial, Helvetica, sans-serif; background-color:#F0F0F0; }#resultado img { float:left; padding:0 5px 5px 0; }#usuario { clear:both; position:relative; display:block; } #espaco_usuario { height:40px; background-color:#FF0000; display:block; }Como é um sistema dinâmico, não posso determinar a altura, porém, preciso que o layout fique em blocos corretamente.

Por favor, algum moderador poderia mover este tópico para o fórum Web Standards, pois postei na seção errada. Dese já agradeço e peço desculpas pelo erro.