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)
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
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
Here’s the example I mentioned by removing the position:relative from #wrapper but leaving the html untouched.
<!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>
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 ]
Here is the footer using the usual sticky footer method.
<!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 */}
