Horizontal one-page layout how?

I have requirement on creating website which has all the sites in index and horizontaly beside each other.

Each of the site would be big for 100% width of the browser. So if you open webpage you can see only first page. You click on the link with #next link and it will "slide you to开发者_StackOverflow the left", to the next page.

I have everything ready, just cannot get how to position those sites beside each other. float doesnt work, it goes under each other.

I hope someone can understand this hehe. Thanks for advice

I have found a solution already.

Check out (great) new function in CSS3 calc()

http://hacks.mozilla.org/2010/06/css3-calc/

You would want to float them all left, but remember to set 'overflow: hidden;' on your container element, this way they should stay in line.

You can then use JS in some guise to 'slide' them about.

http://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html

From the sound of it, you should be able to convert what you have into what you want pretty easily, and that tutorial is fairly straightforward.