I have a simple page illustrated on the following link, which is scalable when you resize your browser windwow: http://pastehtml.com/view/1eg346q.html
As it works now, it float's left and when there is room for another box in the row the pictures move around.
The thing is, when you try to make your browserwindow larger, it makes a lot of white space until there is finally room for a new box - like this: http://imageshack.us/photo/my-images/220/scal1.jpg/
Is there any way of spreading the white space in both sites when you resize, so it's kind of like 50% to the left and 50% to the right? Perhaps like this: http://imageshack.us/photo/my-images/641/scal2.jpg/
The only way I can think of is centering the boxes, but I dont want them to be centered all the time - only when you resize...
If there's no way to do this, do you have any better suggestions for scaling like I do now and at the same time on how to get rid of the white spacing?
The easiest thing to do would be to change the box class float to display: inline-block then wrap all the elements in a container, set a text-align: center; and margin: 0 auto;
Fiddle: http://jsfiddle.net/4UDxE/
