SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need css help to develop horizontal website

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.

    Code:
    <!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>
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    May 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You're welcome. I'm glad it was helpful.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •