Using JQuery to horizontally center content within a horizontally scrolling page

Question

I have a page with 3 content areas (divs with the class "section").

http://refreshperspective.com/CLIENTS/unboxed/products.html

I'm using JQuery to scroll horizontally to these three divs. The issue I am having is keeping the content in the div centered when the window is resized. I have been using the following code:

var wind = $(window).width();
$(".section").width(wind);
$(window).resize(function(){
var windRe = $(window).width();
$(".section").width(windRe);
});

This works perfectly on the first div that is loaded (the main screen) but fails when you scroll right to another of the three divs.

When these are resized the div moves away from the center (to the right when the window is resized out wider to the right, and vice versa). Any thoughts on how I could get the other two content areas to maintain their centering (should stay inline with the navigation at the bottom that is absolutely positioned) like the first loaded div would be awesome.

Answer 1

The problem is that in your CSS, you have defined the sections using simple margins. You'd be much better off using an elastic CSS layout that is designed to deal with window size changes. Take a look at using

margin:0 auto;

in your wrapper CSS classes and that should make it easier. You may also want to consider keeping the three sections in a single div and scrolling that in one big piece.

Nice looking site, btw!