...

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



gribbs100
04-14-2011, 05:27 PM
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.



<!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>

thomasmclennan
04-15-2011, 07:17 AM
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>

gribbs100
04-15-2011, 07:27 PM
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 ).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum