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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

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

    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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,789
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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?

    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>---</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>
    Last edited by gribbs100; 04-09-2011 at 04:50 PM.

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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?
    Last edited by gribbs100; 04-09-2011 at 05:29 PM.

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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.

  • #7
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Can anybody help?

  • #8
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    Anybody have a solution?

  • #9
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post

    Can anybody solve this css issue? Iv posted new code and simplified problem

    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.

    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>---</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>
    Last edited by gribbs100; 04-12-2011 at 05:07 PM.

  • #10
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I'm not exactly sure what your trying to achieve, but what about this?

    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>---</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>
    Teed

  • Users who have thanked teedoff for this post:

    gribbs100 (04-13-2011)

  • #12
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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.

  • #13
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    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?

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

  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    remove overflow: auto from the body. See if thats what you're wanting??
    Teed

  • #15
    Regular Coder
    Join Date
    Feb 2006
    Posts
    168
    Thanks
    32
    Thanked 1 Time in 1 Post
    When I do that, the footer wont stay pinned down.


  •  
    Page 1 of 2 12 LastLast

    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
    •