Div se posiciona errado c/ float

[Croves 1]

Pessoal, vou pedir a ajuda de vocês aqui, não trabalho com CSS e HTML, mas as vezes tenho que me virar, né?! :D

 

Enfim, eu tinha uma idéia de fazer uma DIV chamada box e posiciona-la uma do lado da outra, quantas vezes fossem necessárias. Porém, algo está dando errado. Primeiramente, vou mostrar meu código para vocês:

Meu HTML (http://pastebin.com/SLuAvcPX) e meu CSS (http://pastebin.com/hRMR3tZR)

 

Aqui nessa primeira Screenshot, dá pra ver como fica o layout sem usar a propriedade float na div#box.

http://imageshack.us/photo/my-images/705/semfloat.png/

 

Agora, quando eu coloco a propriedade float:left na div#box, olhem só como fica:

http://imageshack.us/photo/my-images/96/comfloat.png/

 

Reparem como as duas div#box foram parar na parte de baixo da página e a parte branca diminuiu. É como se a div#box "pulasse fora" da div#main.

 

Eu fiz um código "genérico" só para exemplificar como eu quero que fique. Observem que nesse código (http://pastebin.com/B4QDBLhz), as divs ficam uma do lado da outra até chegar no final da largura da página e depois continua em baixo.

 

Alguém sabe o que pode ser esse problema, e como posso estar resolvendo? Obrigado (:

[Diéssica 140]

body #wrapper #main {
padding: 20px;
overflow: auto; /* determinar overflow auto */
}

:seta: http://www.w3schools.com/cssref/pr_pos_overflow.asp