best way to handle horizontal scrolling on sticky footer (complicated)

gribbs100 · 03-20-2011, 10:55 PM

Hello Everybody,

A little while back some of you helped me accomplish what I needed to be done. It was a little bit tricky. I wanted a page that has a sticky footer and also has the main content of the site centered horizontally and vertically on the page. This all works fine now.

Here is the new problem:

If the browser is too small ( either height or width ), scrolling occurs for the main content div, which is good. That is what I wanted but, since the footer is 100% wide, the content in the footer will not scroll left to right. I have included the code below (for testing I have the css in the html file to you can see what is happening).

What is the best approach to solve this issue if the page requires left to right scrolling?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"><title>Dead Centre</title>
	<style type="text/css" media="screen">
	<!--
		
		html,body {width:100%;height:100%;}
				
		html {display:table;}		
				
		body 
			{
			color: white;
			background-color: #000;
			margin:0;padding:0;
			display:table-cell;
			vertical-align:middle;
			}

		#content    
			{
	font-family: Verdana, Geneva, Arial, sans-serif;
	text-align:center;
	background-color: #F00;
	width: 975px;
	height: 450px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 58px;
	margin-left: auto;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #00C;
			}



		#footer 
			{
	text-align:center;
	position:fixed;
	bottom:0;
	left:0px;
	width:100%;
	height:50px;
	background-color:#000;
	color:#FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin-top: 4px;
	overflow: auto;
	padding-bottom: 4px;
			}

.line {
	height: 4px;
	background-color: #F00;
	margin-top: 4px;
	margin-bottom: 4px;
}

		-->
	</style>
	
		<!--[if lt IE 8]>

		<style type="text/css">
                #content {
                        position:relative;
                        top:expression(document.body.clientHeight<=this.offsetHeight ? "0" : (document.body.clientHeight-this.offsetHeight)/2+"px");
                }
				
				* html #footer{position:absolute;}
				* html body {
					position:relative;
				}
        </style>
		<![endif]-->

</head>

<body>
	<div id="content">
		  can you read this top line if scrolling is required?<br>
			<strong>this div should always be centered horizontally and vertically</strong><br>
			and be able to scroll the entire content, even if a sticky footer is at bottom	</div>
            
	<div id="footer">
    navigation links go here
	  <div class="line"></div>
      Copyright 2011 BLA BLA BLA. All Rights Reserved | Website by BLA BLA| Terms | Sitemap
		</div>
</body>
</html>

Any help / code tweaks would be great.

Thanks

quartzy · 03-21-2011, 02:22 AM

I think that because you have position: fixed in the footer is preventing it from scrolling.

gribbs100 · 03-21-2011, 02:58 AM

yeah but if I change the positioning, will it still work as a sticky footer? There has to be a way to fix this page.

gribbs100 · 03-21-2011, 05:00 PM

Id appreciate if anybody can help with this one. It is the foundation for a project that im doing and im at a standstill. Everything works perfect in all browsers with the exception of my issue with horizontal scrolling not going to work on the footer content. It would be great to find a way to make the content slide left to right like the main content div does. but keep that footer at the bottom.

Any coding help would be really great.

Thanks

quartzy · 03-21-2011, 05:40 PM

For me the footer is sticky at the bottom even when I remove the fixed position and the absolute position for IE

However, your content is not verically centred. 100% width is 100% of the browser.

gribbs100 · 03-22-2011, 03:08 PM

Thanks but I know that. That is the problem. It is working fine except If I have to scroll the website left to right, I don't want the navigation links to get cut off. they should scroll too with the site while keeping the page working as it does now ( keep footer at bottom, center main content horizontally and vertically). The page works perfect right now except for the concern of the footer content getting hidden during a horizontal scroll.

Anybody else have a solution?

Mihai Zaharescu · 03-22-2011, 05:30 PM

<div id="site_content>

<div id="content">here goes the content of the site</div>
<div id="footer">here goes only the footer</div>
</div>

the site_content div has width and height 100%, a min width and height of lets say 800 x 600 and overflow auto: this makes everything the size of the screen, when the screen is to small scrollbars appear for everything. Absolutely positioned so the children relate to it.

content has size 100% 100%, overflow auto. This shows another row of scrollbars, just for the things that should move.

footer, absolutely positioned, width 100% height npx. on top of content. This makes look like it is sticky. The content moves in a separate div beneath it.

when the window is big enough, only the scrollbars of the content appear.
if the window gets smaller, another row of scrollbars appear which pan the entire site.
here is an example (wip, so could get broken every now and then):
http://www.flavin7.ro/site_nou/

gribbs100 · 03-22-2011, 09:37 PM

thank you very much for that solution. How would I apply it to my file? The main content div needed to appear like a fixed size and show as centered on the screen but you have said to make it 100% x 100%. Can you show me on my code?

gribbs100 · 03-23-2011, 06:17 PM

There has to be someone that can make this work. Some of you are brilliant with css but this thread keeps getting ignored.

The page is working just the way I want it with the exception that the content in the footer will not scroll left to right ( when needed ). I wanted it to match the horizontal scrolling of the main content div. like a min-width of 975 but because this footer requires a fixed positioning, it will not work.

Can anybody figure this out? I guess im over worrying but if somebody doesn't have their browser at full size or on a low res screen, I want them to be able to scroll everything.

Thanks

imike24 · 03-24-2011, 11:55 AM

ok

devices exercise patches pills female libido semen enhancers autoresponders pheromone forex HGHs