Scalable site - 50% left 50% right

Question

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?

http://webmasters.stackexchange.com – orlp May 10 '11 at 13:26 — orlp, May 10 '11 at 13:26

score 1 · Accepted Answer · answered May 10 '11 at 13:51

1

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/

answered May 10 '11 at 13:51

Gary Green

22,045
6
49
75

I really liked this solution if the last row wasn't centered :/ – May 10 '11 at 14:03
Is there any way to solve this? Cause that would really be win/win! :D – May 10 '11 at 14:16
Thanks. How do you mean the last row shouldn't be centered? – Gary Green May 10 '11 at 14:53
Like the three boxes in the last row here: http://imageshack.us/photo/my-images/690/examplerx.jpg/ - so it's either floated left or not shown somehow.. – May 10 '11 at 14:58
@Don Pedro - Would you like fries with that? – My Head Hurts May 10 '11 at 16:00
If you want something like that it'll take a fair bit of work in Javascript. Not possible with just CSS. As a recommendation, it looks like your creating a gallery of images, it's not very user friendly to have the whole page mutate so much when dealing with different resolutions. It's best to follow the 960px width convention. – Gary Green May 10 '11 at 18:04

score 0 · Answer 2 · answered May 10 '11 at 13:32

0

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!
});

answered May 10 '11 at 13:32

Pedro Correia

793
3
8

Gabriele Petrioli · Answer 3 · 2011-05-12T14:03:56.467

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)

This is is actually pretty cool, though I hoped it could be done in CSS only :) Is it easy enough to put a sidebox to the right if I choose this solution? I quickly tried yesterday, but that seemed to bug, so I'm gonna give it a try again today — , May 12 '11 at 13:39
@Don, a sidebox inside the container ? or outside ? (*and fixed size ? or variable ?*) — Gabriele Petrioli, May 12 '11 at 13:55

Scalable site - 50% left 50% right

3 Answers3