...

View Full Version : How to horizontally scroll content in a sticky footer with 100% width + min-width 975



gribbs100
04-09-2011, 03:43 PM
Can somebody please help me figure this out? It seems like such a simple thing but how is it done? I have asked all over. I have seen sites that have done this but forgot url.

Ok, to make things very simple. Imagine this:

1: a blank html page.
Height and Width 100%.
Margin: 0
Min-width 975px
Background color let’s say #252525

2: OK now a footer that sticks to the bottom of the screen (even with no site content).
Height: 35px
width 100%
Min-width: 975px
Background color #fff

3: Now on the footer, let’s say that you want content on the left navigation links let’s say) and then on the right side other content (copyright credits, etc)

***The issue is that because it is positioned at the bottom using fixed or absolute, if the browser is not at least 975px wide, I want the footer content to be able to scroll horizontally with the rest of the page so that the footer content doesn’t get cut off but.. you can’t because the positioning will not allow it.

I have tried all kinds of sticky footers. The content will never scroll because of its positioning.

Any ideas on how to do this? I need to use this type of setup for a foundation of a new site but I cant move forward until this is figured out. Maybe divs inside the footer div? I can't find a solution.

VIPStephan
04-09-2011, 04:15 PM
You have to put content and footer into a container with the min-width and relative position. Then you position the footer absolute with 100% width.

gribbs100
04-09-2011, 05:30 PM
Thank you very much! I think that does it! But.. there is a bug with multiple scroll bars appearing if browser height & width are below the minimums.

Its a bit sloppy, I just threw it together to post real quick.
I think you will understand my goal here more or less. Can you find my mistake?



<!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>---</title>
<style type="text/css">
html,body {
background-color: #252525;
height: 100%;
width: 100%;
margin: 0;
min-width: 975px; /*for ie7 bug. strange horizontal scroll issue without */
overflow: auto; /* to hide ie7 scrollbar */
}
#wrapper {
height: 100%;
width: 100%;
position: relative;
min-width: 975px;
min-height: 555px; /*keeps a 35px space between top of page, main & footer */
}
.footer {
background-color: #FFF;
height: 35px;
width: 100%;
position: absolute;
bottom: 0;
}
.left {
background-color: #FFF;
height: 35px;
width: 380px;
float: left;
text-align: left;
margin-left: 20px;
}
.right {
background-color: #FFF;
height: 35px;
width: 380px;
float: right;
text-align: right;
margin-right: 20px;
}
#main {
background-color: #F00;
height: 450px;
width: 100%;
margin-top: -242px;
position: absolute;
top: 50%;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="main">Content for id "main" Goes Here</div>



<div class="footer">
<div class="left">Content for class "left" Goes Here</div>
<div class="right">Content for class "right" Goes Here</div>

</div>


</div>
</body>
</html>

gribbs100
04-09-2011, 05:53 PM
maybe html,body needs the min-height instead? I'm trying to at least get this thing to work in firefox,ie 7, ie8 and chrome. That is always what I build for and based on 1024 resolution and up but the scrolling is safeguards.

Also, there is 1 more problem. I wanted the footer to show even if vertical scrolling is needed. a true sticky that would always show regardless of browser height. the content in main would scroll veertically but the footer is in front. make sense?

richierich32
04-09-2011, 08:14 PM
Also, there is 1 more problem. I wanted the footer to show even if vertical scrolling is needed. a true sticky that would always show regardless of browser height. the content in main would scroll veertically but the footer is in front. make sense?

I've been looking around for the same solution

gribbs100
04-09-2011, 09:09 PM
If anybody can come up with a solution, that would be great.

Everything works fine with the exception of me wanting to keep the footer always at the bottom and always visible on the screen. let the main content scroll behind it.

gribbs100
04-11-2011, 02:49 AM
Can anybody help?

gribbs100
04-12-2011, 04:31 AM
Anybody have a solution?

gribbs100
04-12-2011, 05:34 PM
Here is the html code. There are notes inside the divs. I just want to keep the footer at the bottom and the site content flows behind it.



<!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>---</title>
<style type="text/css">
html,body{
height: 100%;
width: 100%;
overflow: auto;

}

body {
background-color: #252525;
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrap {
height: 100%;
width: 100%;
position: relative;

}
.footer {
background-color: #FFF;
height: 35px;
width: 100%;
position: absolute;
bottom: 0px;
line-height: 35px;
z-index: 999;
text-align: center;
min-width: 975px;
}


#main {
background-color: #900;
height: 1500px;
width: 975px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
color: #FFF;
text-align: center;
}

</style>
</head>

<body>
<div class="wrap">


<div class="footer">
Content in this footer div scrolls horizontally along with main content above content when browser is less than 975px wide
</div>
<div id="main">
content in this div scrolls horizontally along with footer content when browser is less than 975px wide. That part works fine.
<p>The issue is that with vertical scrolling of the main content, the footer moves too.</p>
<p>I want the footer to stick to the bottom and the main content scrolls vertical behind it while... maintaining the matched horizontal scrolling that is currently working fine.</p>
<p>The only way that iv found to keep the footer at the bottom is change its positing to fixed but if I do that, it will no longer scroll horizontally.</p>
<p>There has to be a way to do both. </p>
</div>
</div>


</body>
</html>

gribbs100
04-13-2011, 12:52 AM
I wont give up on this. There has to be a way to:

1: pin this footer down

2: always keep it visible at bottom of viewable area

3: allow content to scroll behind it

4: allow the footer content to scroll left to right along with the rest of the page content when browser is less than 975px wide

teedoff
04-13-2011, 02:03 AM
I'm not exactly sure what your trying to achieve, but what about this?


<!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>---</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
background-color: #252525;
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrap {
height: 100%;
width: 100%;
position: relative;
}
.footer {
background-color: #FFF;
height: 35px;
width: 100%;
position: fixed;
bottom: 0px;
line-height: 35px;
text-align: center;
}
#main {
background-color: #900;
height: 1500px;
width: 975px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
color: #FFF;
min-width:975px;
text-align: center;
}
</style>
</head>

<body>
<div class="wrap">

<div id="main"> content in this div scrolls horizontally along with footer content when browser is less than 975px wide. That part works fine.
<p>The issue is that with vertical scrolling of the main content, the footer moves too.</p>
<p>I want the footer to stick to the bottom and the main content scrolls vertical behind it while... maintaining the matched horizontal scrolling that is currently working fine.</p>
<p>The only way that iv found to keep the footer at the bottom is change its positing to fixed but if I do that, it will no longer scroll horizontally.</p>
<p>There has to be a way to do both. </p>
</div>
</div>
<div class="footer"> Content in this footer div scrolls horizontally along with main content above content when browser is less than 975px wide </div>
</body>
</html>

gribbs100
04-13-2011, 02:45 AM
Thank you for posting that code. that is exactly what I want but still with 1 problem ( the one that has me stumped):

If the browser is not 975px wide, you are suppose to be able to scroll left to right. I wanted the content in the footer and the main site content to both scroll. yet keep everything else working too. There has to be a way.

gribbs100
04-13-2011, 03:13 AM
I just about have it with 1 bug. try this code and make the browser less than 975 wide. in order to get to the vertical scrollbar, you have to scroll to the right.

other than that

the footer stays pinned

content flows behind it

you can scroll entire page left to right ( including footer content )

just that 1 bug left. Anyone?



<!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>---</title>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
overflow: auto;

}
body {
background-color: #252525;
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
min-width: 975px;
}
.wrap {
height: 100%;
width: 100%;
position: relative;


}
.footer {
background-color: #FFF;
height: 35px;
width: 100%;
min-width: 975px;
position: absolute;
bottom: 0px;
line-height: 35px;
text-align: center;

}
#main {
background-color: #900;
height: 1500px;
width: 975px;
margin-left: auto;
margin-right: auto;
font-size: 18px;
color: #FFF;
text-align: center;

}
</style>
</head>

<body>
<div class="wrap">

<div id="main"> content in this div scrolls horizontally along with footer content when browser is less than 975px wide. That part works fine.
<p>The issue is that with vertical scrolling of the main content, the footer moves too.</p>
<p>I want the footer to stick to the bottom and the main content scrolls vertical behind it while... maintaining the matched horizontal scrolling that is currently working fine.</p>
<p>The only way that iv found to keep the footer at the bottom is change its positing to fixed but if I do that, it will no longer scroll horizontally.</p>
<p>There has to be a way to do both. </p>
</div>
</div>
<div class="footer"> Content in this footer div scrolls horizontally along with main content above content when browser is less than 975px wide </div>
</body>
</html>

teedoff
04-13-2011, 03:18 AM
remove overflow: auto from the body. See if thats what you're wanting??

gribbs100
04-13-2011, 03:33 AM
When I do that, the footer wont stay pinned down.

teedoff
04-13-2011, 03:40 AM
When I do that, the footer wont stay pinned down.

It does for me. Same code as I posted above without the overflow: auto; on the body tag.

gribbs100
04-13-2011, 03:48 AM
yeah but when you remove that, now the footer content will not scroll horizontally. it will get cut off. That is what is making this so difficult. We are so close too.

teedoff
04-13-2011, 03:53 AM
ok Like I said, I'm still not 100% sure what effect you're striving for when you say you want the footer content to scroll horizontally. Do you mean you want the text to stay fixed in the center of the footer as the window is resized smaller and smaller? Here is what I'm seeing now with the browser minimized.

gribbs100
04-13-2011, 04:10 AM
Yeah when the browser gets smaller and smaller in width, and the page has to scroll horizontally, I want the text in the footer to scroll just like the main site content (left to right). and also stay pinned down like it is now.

gribbs100
04-13-2011, 06:38 PM
can anybody figure this out?

This is a recap of what I need.

1: make the content in the footer scroll horizontally ( just like the main site content does ) when the browser is less than 975px wide

2: The footer must stay pinned to the bottom of the visible screen.

3: The main site content scrolls behind the footer.


Any help would be great.

gribbs100
04-14-2011, 01:25 AM
Can anybody help? Maybe a SR Coder or a Mod?

gribbs100
04-14-2011, 07:04 AM
Any ideas?

ThomasC
08-30-2011, 04:42 PM
A bit late. But I spent some hours on this as well. I didn't find a CSS solution for this problem either. So I ended up using a bit of javascript to "correct" the position of my footer.

$(window).scroll(function(){
$('#footer').css('marginLeft',-$(window).scrollLeft()+'px');
});
Relevant CSS:

#footer { position: fixed; bottom: 0px; width: 100%; min-width:995px; }



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum