I'm trying to create a site very much like in this picture:Layout Image on DropboxThe Problem:
I need the site to scroll horizontally, as suggested in the image.
I also need the vertically scrolling elements to scroll, but inside the element itself, not the entire site. When I scroll up/down in the first frame of the site, it scrolls down to a blank area because the second frame is so tall and forces the entire site to be as tall as the tallest element.
HTML structure:\[code\]div #horizontal-container div #horizontal-wrapper div #section-1 .section div #section-2 .section div #section-3 .section so on...\[/code\]CSS:\[code\]html, body { overflow: hidden;}#horizontal-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-y: hidden; overflow-x: scroll;}#horizontal-wrapper { width: 400%; height: 100%;}.section { width: 25%; /* A quarter of its parent with 400%, to be 100% of the window. */ height: 100%; float: left; overflow-y: scroll;}\[/code\]Hopefully I made it clear here. What am I missing to get this working? Should I maybe incorporate a little JavaScript to toggle the \[code\]overflow\[/code\] property of the container when I hit certain horizontal scroll points? That sounds messy. :/
