SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    awkward sticky footer problem

    i've got this site i'm styling (restyling) & i'm having trouble making the footer stick to the bottom of the page. i've had a look at the usual ways of doing it, but the HTML i've got to work with is a bit different (main content & footer divs inside a wrapper div - see image)

    hierarchy.png

    i've stripped down the page i need to style, & cleared out everything from the HTML & CSS that i think is surplus to requirements. you can see it here

    i've been reading around the subjects of overflow, clearfix, floats & block level formatting (cos i didn't create the site & don't fully understand its workings) but i'm still stuck

    so any help would be appreciated

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Do I understand from your comments that the html cannot be moved around into the correct position?

    If so then you won't be able to have a sticky footer with that setup. You could possibly use an absolutely placed sticky footer except that you have position:relative on #wrapper and therefore you cannot place the footer in respect of the main page wrapper. If you are able to remove the position:relative from the wrapper I can show you how to code it although absolute sticky footers are unstable in older versions of ie in dynamic environment.

    Also you cannot set a 100% height on pagewidth because that means the page can never grow (It would need to be min-height:100%). Also you have set backgrounds on the html and body element and that won;t work in a 100% height scenario anyway. Just place the background color on the body.

    The css faq explains 100% height and the sticky footer in detail. It is the only resource for a fully functional sticky footer as all others that I've seen are broken in some way. Indeed the original sticky footer was developed back in 2003 with help from me on these very forums

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Here's the example I mentioned by removing the position:relative from #wrapper but leaving the html untouched.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link type="text/css" href="stickyFooter2.css" rel="stylesheet" />
    <style type="text/css">
    /* CSS Document */
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    #pagewidth:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    html, body {
    	margin: 0;
    	padding: 0;
    }
    html, body { height: 100%; }
    body {
    	background-color: #D2A6FF;
    	text-align: center;
    }
    #pagewidth {
    	background-color: #97FFB1;
    	margin: auto;
    	text-align: left;
    	width: 960px;
    	min-height:100%;
    	position:relative;
    	clear:both;
    }
    * html #pagewidth { height:100% }/* ie6*/
    #header {
    	background-image: url(http://webdevtestsite.site11.com/header_bg_semitrans.png);
    	background-repeat: repeat;
    	height: 120px;
    	position: relative;
    	overflow: hidden;
    }
    .clearfix:after {
    	clear: both;
    	content: ".";
    	display: block;
    	height: 0;
    	visibility: hidden;
    }
    .clearfix { zoom:1.0 }
    #wrapper {
    	background-color: #993333;
    	margin-top: 15px;
    	width: 100%;
    	padding-bottom:80px;/* preserve footer space */
    }
    #leftcol {
    	background-color: #FFA74F;
    	min-height: 100px;
    	margin-bottom: 0;
    	padding-bottom: 10px;
    	float: left;
    	padding-left: 40px;
    	position: relative;
    	width: 625px;
    }
    #footer {
    	background-color: #64A2E6;
    	bottom: 0;
    	left:0;
    	position: absolute;
    	height: 67px;
    	clear: both;
    	overflow: auto;
    	padding-top: 10px;
    	text-align: center;
    	width:960px;
    }
    </style>
    </head>
    
    <body>
    <div id="pagewidth" >
    		<div id="header">
    				<p>Height of Header 120px</p>
    		</div>
    		<div id="wrapper" class="clearfix">
    				<div id="leftcol">
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum, risus et fringilla condimentum, mauris magna porta quam, sed elementum massa mauris sed dolor. Maecenas pellentesque sagittis porttitor. Sed ligula tortor, volutpat quis semper eu, aliquet eget est. Nam nec lectus vel enim interdum bibendum vitae vel magna. Proin adipiscing congue venenatis. Nulla facilisi. Morbi magna sem, varius bibendum facilisis at, volutpat nec velit. Maecenas pulvinar diam ac lectus gravida dictum. Vestibulum sed metus ligula. Aenean hendrerit sagittis quam, ac sagittis est luctus non. Aenean eu tellus vitae erat vulputate commodo. Suspendisse potenti.</p>
    						<p>Aenean ultrices augue eu mi iaculis luctus. Quisque pulvinar commodo condimentum. Nullam ut turpis ut metus aliquet adipiscing ut eget mi. Nam placerat, sem id fermentum varius, nulla magna tempor magna, quis aliquam erat risus eget felis. Fusce eget diam quis ipsum facilisis egestas. Nam egestas sagittis augue dignissim elementum. Phasellus ligula ante, elementum in accumsan vitae, posuere eu erat.</p>
    						<p>Vivamus non risus vitae orci accumsan porta lobortis sit amet massa. Vivamus pretium laoreet erat ut ornare. Praesent blandit commodo ipsum a consectetur. Nulla facilisi. Pellentesque at dolor eu nisi tristique facilisis. Integer tristique, lacus vitae condimentum condimentum, mauris elit faucibus libero, et pretium sem arcu vitae risus. Cras feugiat euismod nunc, sed gravida quam malesuada non. Integer et orci et sapien venenatis sodales id pretium odio. Etiam in nisi lorem. Duis et tellus quis mauris tempor dapibus. Cras consequat, augue et bibendum dapibus, risus ipsum interdum neque, id ultrices ante enim eget eros. Fusce massa tortor, consequat vel consequat sed, tempor et mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse et tortor dui, in dictum mi. Nunc interdum laoreet nisi, sit amet tincidunt ipsum condimentum et.</p>
    				</div>
    				<div id="footer">Footer Text...   Footer Text...   Footer Text...   Footer Text...   Footer Text...</div>
    		</div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you show me the 'changing the HTML' approach?

    [ i'll just tell the client i couldn't do it like he wanted without changing the HTML. i did tell him originally that i thought he was being a bit unrealistic ]

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here is the footer using the usual sticky footer method.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <link type="text/css" href="stickyFooter2.css" rel="stylesheet" />
    <style type="text/css">
    /* CSS Document */
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;
    }
    #pagewidth:after {
    	clear:both;
    	display:block;
    	height:1%;
    	content:" ";
    }
    html, body {
    	margin: 0;
    	padding: 0;
    }
    html, body { height: 100%; }
    body {
    	background-color: #D2A6FF;
    	text-align: center;
    }
    #pagewidth {
    	background-color: #97FFB1;
    	margin:-77px auto 0;/* footer height */
    	text-align: left;
    	width: 960px;
    	min-height:100%;
    	position:relative;
    	clear:both;
    }
    * html #pagewidth { height:100% }/* ie6*/
    #header {
    	background-image: url(http://webdevtestsite.site11.com/header_bg_semitrans.png);
    	background-repeat: repeat;
    	height: 120px;
    	position: relative;
    	overflow: hidden;
    	border-top:77px solid #fff;/* preserve footer space */
    }
    .clearfix:after {
    	clear: both;
    	content: ".";
    	display: block;
    	height: 0;
    	visibility: hidden;
    }
    .clearfix { zoom:1.0 }
    #wrapper {
    	background-color: #993333;
    	margin-top: 15px;
    	width: 100%;
    	position:relative;
    }
    #leftcol {
    	background-color: #FFA74F;
    	min-height: 100px;
    	margin-bottom: 0;
    	padding-bottom: 10px;
    	float: left;
    	padding-left: 40px;
    	position: relative;
    	width: 625px;
    }
    #footer {
    	background-color: #64A2E6;
    	position:relative;
    	height: 67px;
    	clear: both;
    	overflow: auto;
    	padding-top: 10px;
    	text-align: center;
    	width:960px;
    	margin:auto;
    }
    </style>
    </head>
    
    <body>
    <div id="pagewidth" >
    		<div id="header">
    				<p>Height of Header 120px</p>
    		</div>
    		<div id="wrapper" class="clearfix">
    				<div id="leftcol">
    						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum, risus et fringilla condimentum, mauris magna porta quam, sed elementum massa mauris sed dolor. Maecenas pellentesque sagittis porttitor. Sed ligula tortor, volutpat quis semper eu, aliquet eget est. Nam nec lectus vel enim interdum bibendum vitae vel magna. Proin adipiscing congue venenatis. Nulla facilisi. Morbi magna sem, varius bibendum facilisis at, volutpat nec velit. Maecenas pulvinar diam ac lectus gravida dictum. Vestibulum sed metus ligula. Aenean hendrerit sagittis quam, ac sagittis est luctus non. Aenean eu tellus vitae erat vulputate commodo. Suspendisse potenti.</p>
    						<p>Aenean ultrices augue eu mi iaculis luctus. Quisque pulvinar commodo condimentum. Nullam ut turpis ut metus aliquet adipiscing ut eget mi. Nam placerat, sem id fermentum varius, nulla magna tempor magna, quis aliquam erat risus eget felis. Fusce eget diam quis ipsum facilisis egestas. Nam egestas sagittis augue dignissim elementum. Phasellus ligula ante, elementum in accumsan vitae, posuere eu erat.</p>
    						<p>Vivamus non risus vitae orci accumsan porta lobortis sit amet massa. Vivamus pretium laoreet erat ut ornare. Praesent blandit commodo ipsum a consectetur. Nulla facilisi. Pellentesque at dolor eu nisi tristique facilisis. Integer tristique, lacus vitae condimentum condimentum, mauris elit faucibus libero, et pretium sem arcu vitae risus. Cras feugiat euismod nunc, sed gravida quam malesuada non. Integer et orci et sapien venenatis sodales id pretium odio. Etiam in nisi lorem. Duis et tellus quis mauris tempor dapibus. Cras consequat, augue et bibendum dapibus, risus ipsum interdum neque, id ultrices ante enim eget eros. Fusce massa tortor, consequat vel consequat sed, tempor et mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse et tortor dui, in dictum mi. Nunc interdum laoreet nisi, sit amet tincidunt ipsum condimentum et.</p>
    				</div>
    		</div>
    </div>
    <div id="footer">Footer Text...   Footer Text...   Footer Text...   Footer Text...   Footer Text...</div>
    </body>
    </html>
    I tidied the css up a little bit so watch out for the changes.

    You must have a full doctype or all bets are off.

    Read the faq on the sticky footer to understand exactly how it works. There are three constants that must match up.

    The footer height : 77px
    The negative margin : #pagewidth {margin:-77px auto 0;/* footer height */}
    The buffer : #header{ border-top:77px solid #fff;/* preserve footer space */}


Bookmarks

Posting Permissions

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