Tenho DIV com largura flexível definida p. largura mínima: 800 px e largura máxima: 1400 px. Nesta DIV, existem muitas caixas com largura fixa de 200px e exibição: bloco em linha. Portanto, dependendo da largura do DIV pai, essas caixas preenchem todo o espaço.

Meu problema é o espaço em branco no lado direito, causado pela largura variável da div principal. Às vezes, esse espaço em branco é pequeno e tem boa aparência, mas com larguras diferentes da div pai, esse espaço em branco é de quase 200 p

Não sei, se descrevi meu problema com detalhes suficientes, espero que esta foto ajude a descrever minha situação real:

E é isso que eu gostaria de ter:

Esta margem automática pode ser facilmente alcançada usando TABLE. No entanto, não sei o número exato de colunas, pois depende da resolução da tela do usuário. Portanto, não posso usar tabela e preferir ficar com CSS.

Alguém tem uma idéia de como resolver isso? Agradecemos antecipadamente por seus comentários e respostas.

EDITAR Não preciso do suporte do IE6. Gostaria de oferecer suporte ao IE7, mas o IE7 é opcional, pois sei que há limitações, portanto provavelmente usarei largura fixa de "div.wrapper" no IE7

EDIT2 Eu preciso lidar com várias linhas dessas caixas, para que elas não excedam a caixa "div.wrapper" e sejam agrupadas corretamente em várias linhas de caixas, não apenas em uma linha long

EDIT3 Não sei o número de "colunas", pois isso é muito variável, dependendo da resolução da tela do usuário. Portanto, na tela grande, pode haver 7 caixas em uma linha e, em telas pequenas, pode haver apenas 4 caixas em uma linha. Então, eu preciso de uma solução que não defina um número fixo de caixas em uma linha. Em vez disso, quando as caixas não couberem em uma linha, elas devem apenas quebrar para a próxima linh