Centering a box when page is resized

[mboehler3]

Hi all, my page I am working on is here: http://www.lps.surepayroll.com/2011-3-stepAs you can see, there is a white box in the middle of the page. On my screen, which is maximized, I see the box sitting perfectly in the center. But, when I bring the browser out of full screen view and play with the width of the browser, the box doesn't move along with the page. For example, if I take my browser window and shrink it going from right to left, the white box goes out of plain view. I can't see it.I want to have the white box move as the browser window shrinks, where it's always centered on the page. Obviously I understand that if the browser window shrinks to like 200 pixels wide it will have to cut off some of the box. But I've seen this accomplished before where if you shrink/expand the browser window, the content will position itself accordingly. Does anyone know what CSS I can apply that will cause this to happen?It's always something I've wanted to know but just never got around to posting. Now I need to know for this project. Thanks again for any help!

[jeffman]

.container and .box are centered inside .background, but .background is 1659px wide. That throws everything it contains off to the right. Don't define its width at all, or define it to match the width of the other divs.

[mboehler3]

.container and .box are centered inside .background, but .background is 1659px wide. That throws everything it contains off to the right. Don't define its width at all, or define it to match the width of the other divs.

Ah, so that was the problem. Got it, solved it. Thanks sir!