Simple scrollbar issue on window resize

I know there is an insanely simple solution to this, but for the life of me I just can't get it. I have a site, where the content width is 848px (strange I know), but there is an absolutely positioned div outside of it all with a width of 1496px. They are centrally aligned with one another, and I need a scrollbar to be add开发者_开发技巧ed ONLY once the window is resized to be more narrow than the 848px. check it out at brianbattenfeld.com/fingers/

You could always use CSS Media Queries to detect the width of the browser then you could add scroll bars to the page/elements you want. I couldn't quite work out if you were after horizontal or vertical scrollbars when when the wideth gets to 848px as currently there is no horizontal scroll bars at all.

Maybe something like this would work (haven't tested as is only a rough guide)

@media (min-width:848px) {
  html {
    overflow: -moz-scrollbars-vertical; 
    overflow-x: hidden; 
    overflow-y: scroll;
  }
}

Hope this is useful!