Need css help to develop horizontal website

HTML & CSS
1

I’m trying to stay away from “frame sets” and wonder if there is an easy CSS alternative to the following:

This site is to be horizontally scrolling. It consists of a number of “pages” that exist in a single row of a table. Let’s say that the total length of the row (consisting of 6 pages, one per column) is 3000 pixels. I want to be able to scroll through all the 6 pages using the scroll bar beneath it but have the area just below the table row show a stationary area that is maybe 1000 pixels wide (or as wide as the table row above it).

Hence, I can scroll through all the pages of the site while the information below remains fixed.

Any help is appreciated.
chop

2

One easy way to do this is to have a container div (along with the rest of the page) set to a width of 1000px, and set it to overflow: auto. Then make the inner div (with the panels) set to width: 3000px. E.g.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style media="all">
* {margin: 0; padding: 0;}
body {background: #f7f7f7;}
.wrapper {width: 1000px; margin: 0 auto; background: #e7e7e7;}
.scroll-outer {width: 100%; overflow: auto;}
.scroll {width: 3000px; min-height: 400px; background: white;}
.footer {width: 100%; padding: 50px 0; background: #d7d7d7; margin-top: 10px;}
</style>
	
</head>

<body>

<div class="wrapper">
	<div class="scroll-outer">
		<div class="scroll">
		</div>
	</div>
	<div class="footer">
	</div>
</div>

</body>
</html>
3

Thank you sooo much! That was exactly what I was looking for. I have a basic understanding of CSS but I didn’t have any idea about this one. At least I understand your method enough that I can tweak it a little and I’ll be done. It was generous of you to supply the working code.
much appreciated.
Chop

4

You’re welcome. I’m glad it was helpful. :slight_smile: