I have the following CSS code for sticky footer:
html, body {background:#0000F0; margin:0; padding:0; height:100%;}
#wrapper {background-color:#F4F5FF; margin:5px auto; width:1000px; border:solid 1px black; min-height:100%; position:relative;}
#main {padding-bottom:50px;}
#footer {width:100%; height:50px; position:absolute; bottom:0; left:0;}
I would like to make the footer not quite touch the bottom of the page so the background shows all the way around the “wrapper”.
How can I do this?
Hi,
You didn’t provide html so I’m going to have to guess a little.
Assuming your footer is inside #wrapper then all you need do is change bottom:0 to bottom:5px (or whatever gap you want). If you also want a gap at the side then do this:
#footer {height:50px; position:absolute; bottom:5px; left:5px; right:5px;}
The width is removed and the element placed 5px from the left and right instead.
You will also need to increase the padding-bottom on #main to make room for the gap you added.
#main {padding-bottom:60px;}
Take a look at the CSS faq on the sticky footer to see more robust methods of creating a sticky footer as your method will not cater for text resize (or for a fluid height sticky footer) although you could set the footer height n ems to cater for a simple text resize.
You didn’t provide the html, but the first thing you’ll want to try is tinker with the padding-bottom of that particular div.
I tried your suggestion and it moves the text in the footer but the “wrapper” background colour still goes all the way to the bottom.
How much of the html do you need?
I put padding-bottom on the “wrapper” but it is moving the “footer” down as if the “footer” is outside the “wrapper” when it isn’t.
daniel3,
We need to see enough HTML and CSS to replicate the problem. Ideally, we need to see what you see.
If you can post a link to the site, that would help; or a standalone page that demonstrates the problem would be fine.
Does that answer your question about “how much HTML (and CSS) we need to see”?
Enough to replicate the problem on our computers.
Please click the link at the bottom of this message and read our posting guidelines.
Thanks.
Hi,
Maybe this will help. It’s a modern example of a sticky footer with a gap all around the main section.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Sticky footer IE8+</title>
<style type="text/css">
/* use border-box model */
*,*:after,*:before{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
margin:0;
padding:0;
height:100%;
}
body{background:red;}
#wrap {
display:table;
max-width:1000px;
margin:0 auto;
height:100%;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
}
*+html #wrap{height:auto}/* ie7*/
.content { background:#ccc; }
header {
background:#999;
color:#fff;
text-align:center;
padding:10px 0
}
header, .footer, main { display:block }/* ie7 and under */
header, .footer, main { display:table-row }
/* height 1px on the header and footer is the sticky footer technique */
header, .footer { height:1px }
*+html header,*+html .footer{height:auto}/* ie7*/
h1 {
padding:10px;
margin:0;
}
.footer {
background:#999;
color:#fff;
text-align:center;
}
.footer p {
margin:0;
padding:10px
}
</style>
<!-- html5 shiv for IE8 and under -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<header>
<h1>Fluid Height Sticky footer simple - IE8+ only </h1>
</header>
<main class="content">Content</main>
<footer class="footer">
<p>Sticky footer</p>
</footer>
</div>
</body>
</html>
It’s a sticky footer in IE8+ but should just revert to a normal layout in ie7 and under (with a few tweaks).
The benefit of this layout is that you don;t need to compensate for the sticky footer in any way and it can contain as much or as little content as you need and will adapt to smaller layouts so is good for responsive design
Add z-index to each and css will stack each according to the number on the level up to 100.
body {background:#0000F0; margin:0; padding:0; height:100%;z-index: 99;}
#wrapper {background-color:#F4F5FF; margin:5px auto; width:1000px; border:solid 1px black; min-height:100%; position:relative;z-index: 80;}
#main {padding-bottom:50px;z-index: 85;}
#footer {width:100%; height:50px; position:absolute; bottom:0; left:0;z-index: 50;}
Z-index deals with overlapping elements and applies only to positioned elements so would have no meaning on the body element or on #main. It should not be necessary at all in the example above anyway as the footer will never overlap the content in #wrapper anyway due to the padding on #main protecting the footer.
I put padding-bottom on the “wrapper” but it is moving the “footer” down as if the “footer” is outside the “wrapper” when it isn’t.
#wrapper is min-height:100% and if you add padding-bottom to it then it is now taller than the viewport by the amount of padding you added and therefore below the fold. As you are placing your footer at the absolute bottom of #wrapper then it too will start below the fold.
Thanks. Your code helped me.
I used this:
border-bottom:5px solid #0000F0;
.
This added a border at the bottom the same colour as the background.
This is probably not the best solution but it works.
If anybody has a better way (such as making margin-bottom work) please tell me.
daniel3, if you would like to prepare a stand-alone page that demonstrates the problem, or post a link to your page, we can give better help.
If you were feeling ill and sent your doctor a message saying that you were feeling ill and asking him what is wrong with you, do you think he would know without examining you? That’s what you are asking us to do without seeing the code that shows the problem. We need to see your code in order to provide useful help.
Well the best solution is the one I already posted in #post #7 and does exactly what you want and in the most robust way. I’m not sure what you don’t like about it unless you are supporting ie7 and under?
There are other ways but none are as efficient and as foolproof as the method I gave as it does not rely on fixed heights or pushers or padding.
You can do it with code similar to yours using the border-box model again and you would do it like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* use border-box model */
*, *:after, *:before {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
margin:0;
padding:0;
height:100%;
}
body { background:#0000F0;padding:5px 0}
#wrapper {
background-color:#F4F5FF;
width:1000px;
border:solid 1px black;
margin:auto;
min-height:100%;
position:relative;
}
#main { padding-bottom:50px; }
#footer {
height:49px;
position:absolute;
bottom:0;
left:0;
right:0;
z-index:2;
border-bottom:solid 1px black;
background:red;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>IE8+</h1>
<div id="main"> </div>
<div id="footer">Footer</div>
</div>
</body>
</html>
However, you are once again tied to fixed height footers and pusher/padding elements to protect the footer.
That code seems too long and complicated.
I like to keep my code as short as possible and know what each bit does.
The code in post 7 is just longer because of embellishments and older browser support. In its raw form it’s actually shorter than you example.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Sticky footer IE8+</title>
<style type="text/css">
/* use border-box model */
*, *:after, *:before {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
html, body {
margin:0;
padding:0;
height:100%;
}
body { background:red; }
#wrap {
display:table;
max-width:1000px;
width:100%;
margin:0 auto;
height:100%;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
}
.content { background:#ccc; }
.footer, .content { display:table-row }
.footer {
height:1px;
background:#999;
color:#fff;
text-align:center;
}
</style>
</head>
<body>
<div id="wrap">
<div class="content">ie8+ sticky footer</div>
<div class="footer">sticky footer </div>
</div>
</body>
</html>
The code in post #11 is basically the same length as yours but with the border-box rule added so that we can get a proper transparent gap.
Note that the absolute footer method will break if a user resizes their text unlike the method I recommend. These days users are more savvy and often resize text through their browser controls (especially when you get to my age as the eyes are the first thing to go :)).
I like to keep my code as short as possible and know what each bit does.
So do I but never at the cost of functionality