Recently I've created a site with a gallery feature where images are placed throughout the entire page, and depending on the users browser size, the number of columns of images will either decrease or increase. A site with a similar feature is: pinterest.com. Basically, I added 50px margins on both the left and right side of the page so the images, header and other components of the site aren't right against the edge. The problem occurs when I begin to reduce the size of my browser. The header / footer and the rest of the content decreases in size like it should, but the images get pushed down and it ruins the layout.

For example, the site has 4 columns of images and it is aligned on both the right / left side with the header and footer contents, but as soon as the browser decreases so 4 columns no longer fit and 3 are required, there is now a big gap on the right side of the page, however the header and footer still remains 50px from the side of the browser. What I'm trying to figure out, is how would I make it similar to the site above (pinterest) so that when the page is reduced in size so only say...3 columns of images can fit, the images will be aligned in the center of the page and the header and footer will be forced to align with the images.

If you are not 100% sure on what I'm asking, take a look at pinterest and reduce your browser window size. As you probably noticed, when you reduce the size and all the current columns can fit anymore, the number of columns gets reduced, but unlike my site currently, there isn't a huge white space on the right side, the whole layout gets centered and the header / footer align with the current number of columns.

Haha, just realized I kind of wrote a lot there, I aplogize, just trying to be clear.

But basically, if you don't want to read the entire post, I'm trying to replicate how pinterest scales the image gallery. When the browser window is reduced, the number of columns of images reduce as well, but unlike my site (with a huge open space when the image gets pushed to next line), the pinterest site centers its layout and the header / footer / images all align nicely until the browser window is reduced / increased again to the next set of columns, at which point it does it again.