Scalable site - 50% left 50% right

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 ho开发者_高级运维w 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/

Maybe using the onResize event you can set the alignment to centered and back to default once the event ends?

$(window).bind('resize', function(){
  // do stuff!
});

I do not think that is possible with pure CSS.

Wrapping the boxes in a div (with margin:0 auto and overflow:auto) and then using some jQuery we can do this with

$( function(){
    var $container = $('#container');
    var $cparent = $container.parent();
    var boxsize = $('.box:first').outerWidth( true );

    $(window).resize(function(){
        var fitwidth = $cparent.width();
        var howMany = Math.floor( fitwidth / boxsize );
        $container.width( howMany * boxsize );
    }).resize();
});

demo http://jsfiddle.net/gaby/8BcQX/
in the demo i have changed the margin of the .box to be 10px left and 10px right for more accurate centering

Update for comments

With a side bar in the inside : http://jsfiddle.net/gaby/8BcQX/1/ (you have to size it accordingly if you want it and the boxes to line-up)

With a sidebar outside the grid : http://jsfiddle.net/gaby/8BcQX/2/ (minor changes to the jquery to accommodate for the size of the siblings to the container)