Div se posiciona errado c/ float

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 (: