Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    how to scroll content in this div if it must remained position:fixed?

    Guys, I have another thread open but it is pretty much dead. Looks like people gave up on it. Im hoping I can make this as clear as possible,

    In the following code, you will see how the footer stays pinned down but... I also need the content to scroll left-to-right if the browser is too narrow.

    Seems like you cant do both. I really need help on this one.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body {
    	width:100%;
    	height:100%;
    	
    }
    body {
    	background-color: #252525;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #000;
    	margin:0;
    }
    .footer {
    	height: 35px;
    	width: 100%;
    	background-color: #E0E0E0;
    	position: fixed;
    	bottom: 0px;
    	line-height: 35px;
    	text-align: center;
    }
    .main {
    	height: 1500px;
    	width: 965px;
    	margin-right: auto;
    	margin-left: auto;
    	top: 0px;
    	background-color: #666;
    	font-size: 24px;
    	color: #FFF;
    	text-align: center;
    	border-right-width: 5px;
    	border-left-width: 5px;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-right-color: #E0E0E0;
    	border-left-color: #E0E0E0;
    	letter-spacing: -1px;
    }
    </style>
    </head>
    
    <body>
    <div class="main">
      <p>1:content in this div should scroll up and down while footer remains pinned down.</p>
      <p>&nbsp;</p>
      <p>2: When the browser is too narrow, the content in this div will scroll left to right as it should. I also want the content in the footer to scroll left to right as well but it must remain pinned down. The content in it gets cut off.<br />
        <br />
      The problem is that the footer is positied fixed to stay down. If I change it to absolute, it will scroll left to right but...then it doesnt stay pinned down any longer.</p>
      <p>&nbsp;</p>
      <p>I need to do both. <br />
      </p>
      <p>&nbsp;</p>
    </div>
    <div class="footer">THE CONTENT IN THIS FOOTER MUST SCROLL LEFT TO RIGHT WHEN NEEDED JUST LIKE RED BOX ABOVE BUT...ALSO CONTINUE TO STAY PINNED DOWN</div>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    33
    Thanks
    2
    Thanked 1 Time in 1 Post

    Cool

    Here is an example of a fixed DIV scrolling for reference.
    <div style="position:fixed; height:35px;">
    <div style="height:inherit;overflow:scroll;">
    The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.
    </div>
    </div>

    or...
    <div style="position:fixed; height:35px;OVERFLOW:SCROLL;">
    The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.The problem is that the footer is positied fixed to stay down.
    </div>
    Last edited by thomasmclennan; 04-15-2011 at 07:20 AM.

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Thank you for responding to my post. There are a few problems with this though. It doesn't seem to scroll horizontally. Also, I wanted the page scrollbar to be the bar sliding the content ( and only appear if the browser is less than 975px wide ).


  •  

    Tags for this Thread

    Posting Permissions

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