Hi all,
I’m using the sticky footer method mentioned here: http://www.cssstickyfooter.com and it all works just fine accept I’m not sure where to place my background so that it tiles all the way up to the footer.
I’ve attached my css file and html file samples. Can anyone help me with this? I’ve looked it over and over and just can’t see it.
If I should just past my code into the thread I can do that too.
Ah ok that simplifies it then if we really don’t need to worry about IE5. Thanks so much for all your explanations.
I’m in the CSS Live class right now also and am learning so much I didn’t know before. I’m really starting to understand CSS more now rather than just trying different things to see if they work or not as I’ve been doing in the past (and then not understanding why it worked or didn’t work). 
Yes you could use padding as well and either border or padding would still have the same impact in the broken box model but as we don;t code in quirks mode these days there’s no need to worry about that or a bout ie5 as it is long dead
I prefer border because if you have an absolutely placed child in the (relatively positioned) header then it would takes its co-ordinates from the inner border edge - which is the immediate free space. If you had used padding then you would need to add the padding height to the co-ordinates as the starting position would be the outer padding edge.
Sometimes though you may want something to overlap the header and if you used a border color then it may interfere so in those cases you could use padding.
As usual with css there’s is not really one right answer but an answer that depends on what you are doing at the time
Yes it is a bit confusing and its a shame that we have to resort to these tricks but when you start to think about it you realise why things need to work like this.
To explain simply what’s happening…
we create an element that stretches from the top to the bottom of the viewport exactly (because that’s all we can really do).
We place a footer below this element which means it sits below the viewport and you can’t see it.
Either :
a) drag the footer upwards into view with a negative top margin equal to the height of the footer (which means that content in that div above may be hidden by the footer which is why we then need to add padding bottom to the element above to preserve the space).
Or
b) Drag the outer itself upwards with a negative top margin equal to the height of the footer. The footer now comes into view but the top of the page is above the monitor. That’s why we next add a border-top to the first element inside (usually a header) and again use a border-width equal to the height of the footer. This ensures that content now starts inside the viewport and not above it. everything else is now a normal page.
The three dimensions are always consistent.
footer height
negative margin
soak up height (either padding or border)
The other extra fixes are for various browsers to make them behave and you don’t really need to touch them - just copy and paste and forget about them.
Ok…that does simplify it a lot. In regards to the header you said you can use padding or border. Does it matter which one you use? I guess border is a little bit more cross-browser compliant especially with IE right? Doesn’t IE treat the box model differently in some versions? Would it treat the padding differently in some versions if you used the padding on top of the header instead of the border? Or are both pretty much the same?
Hi Paul,
Thanks so much for fixing my code. I think I’m starting to understand it a little bit more now. I had read your article before this on our sticky footer I just didn’t quite understand it all. But now seeing how you adjusted mine it helps me to understand it a bit better. I think I’m more of a visual learner though, so I think I might try to draw this out somehow so I can understand it better.
Your explanation about the border on top of the header helps a lot also. That makes more sense than always messing with padding at the bottom.
Thanks so much for your help it works just perfectly now.
Ok, thanks for the explanation.
It doesn’t really matter but it just feels neater to use the top border on the header and then you can forget about it. Either way is good but if you add padding-bottom to the last element you have to remember not to add anything else or change where the padding is. Once it’s applied to the header you can forget about it forever.
It is also more reliable to drag the outer upwards rather than dragging the footer over the outer because Firefox wouldn’t need a soak up (if floats were in the mix) but IE would which meant they behaved differently and stopped at different points when padding was added.
Paul, have you always been using the top for footer room or did you switch? I use bottom-room, prolly cause that’s the first way I saw it and it made sense, but is there maybe an advantage to top-soaking?
Hi,
Here is your code adjusted to work (see the comments I have added in the css). The css replaces all your css as I removed the broken code and some unnecessary rules (and your conditional comments are no longer needed either).
<!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>Testing Sticky Footer Layout</title>
<link href="sticky-footer.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
background:#fff url(images/leftnav-bg.jpg) repeat-y;[B]/* apply your repeating background here*/[/B]
[B] width:800px;[/B]
[B] margin:-30px auto 0;/* same negative top margin value as height of footer*/[/B]
}
[B]* html #wrap {height:100%}[/B]
#main {
overflow:auto;
width:800px;
margin:0 auto;
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
body {
font:normal 13px/1.3em "Trebuchet MS", Arial, Helvetica, sans-serif;
background:#ede4d2 url('images/map-bg.jpg') repeat-x fixed center left;
color:#333;
}
a img {
border:none;
}
a, a:link, a:visited {
color:#2959c4;
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:underline;
}
#header {
padding:0;
height:140px;
width:800px;
margin:0 auto;
background-color:#6C823A;
font:normal 13px/1.3em "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
[B]border-top:30px solid #6C823A;/* same as height of footer and negative margin on #wrap*/[/B]
}
/* user top navigation icons */
.toplinks {
width:615px;
padding-bottom:20px;
text-align:right;
}
/* Content Section */
#content {
width:615px;
float:right;
font:normal 13px/1.3em "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
}
#content h1 {
font:bold 15px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#0d371a;
text-align:left;
}
#content h1 span {
color:#6C823A;
}
#content p {
margin:10px 0 5px 0;
text-align:justify;
font:normal 13px/1.3em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#inner, .inner-content {
padding:0 20px;
}
#leftnav {
width:185px;
float:left;
padding:0;
}
/* Left navigation menus */
#navcontainer1 {
width:180px;
margin-top:0;
}
#navcontainer1 ul {
margin-left:0;
padding-left:0;
list-style-type:none;
}
#navcontainer1 a {
display:block;
padding:1px 3px;
margin:6px 0;
width:174px;
text-align:right;
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#navcontainer1 a span {
text-transform:none;
}
#navcontainer1 a:link, #navlist1 a:visited {
color:#fff;
text-decoration:none;
}
#navcontainer1 a:hover {
background-image:url(images/navhover-bg.jpg);
color:#fff;
}
#navcontainer2 {
width:180px;
}
#navcontainer2 ul {
margin-left:0;
padding-left:0;
list-style-type:none;
}
#navcontainer2 ul li.section {
color:#d8b42a;
padding:3px 3px 0 3px;
margin-top:5px;
text-align:right;
text-transform:uppercase;
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#navcontainer2 a {
display:block;
padding:0 3px;
width:174px;
text-align:right;
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:none;
}
#navcontainer2 a span {
text-transform:none;
}
#navcontainer2 a:link, #navlist2 a:visited {
color:#fff;
text-decoration:none;
}
#navcontainer2 a:hover {
background-image:url(images/navhover-bg.jpg);
color:#fff;
}
/* Footer */
#footer {
position:relative;
[B] margin:0;[/B]
height:30px;
clear:both;
color:#fff;
font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#footer a {
color:#fff;
text-decoration:none;
font:bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#footer a:hover {
color:#fff;
text-decoration:underline;
}
#foot {
width:800px;
margin:0 auto;
background-color:#6C823A;
height:30px;
}
#foot #copyright {
width:800px;
text-align:center;
padding-top:8px;
font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"> Header Text Here </div>
<!-- /header -->
<div id="main">
<div id="leftnav">
<div id="navcontainer1">
<ul id="navlist1">
<li><a href="#">Link 1</span></a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<!-- /navcontainer1 -->
</div>
<!-- /leftnav -->
<div id="content">
<div id="inner">
<h1>Heading 1<br />
<span>and rest of Heading 1</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt dapibus tellus, sit amet fermentum augue dictum sed. Nunc ut mauris vel purus posuere ultrices sodales ac magna. Nulla facilisi. Duis blandit pellentesque ultricies. Ut ornare, nunc eget pulvinar faucibus, purus justo ultricies nisi, ac blandit ligula nulla non augue. Vivamus fermentum volutpat semper. Phasellus imperdiet quam eget dui consectetur consectetur. Maecenas in leo velit, et ultrices sem. Aenean tempor purus et massa sagittis et vestibulum tortor eleifend. Nulla elementum velit at arcu consectetur sed ullamcorper ante aliquet. Fusce sed massa nunc, sit amet convallis metus. Maecenas justo orci, euismod quis faucibus eu, mattis quis urna.</p>
</div>
<!-- /inner -->
</div>
<!-- /content -->
</div>
<!-- /main -->
</div>
<!-- /wrap -->
<div id="footer">
<div id="foot">
<p id="copyright">COPYRIGHT © 2009-
<script type="text/javascript">
<!--
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getDate();
var curr_year = d.getFullYear();
document.write(""+ curr_year + "");
//-->
</script>
All rights reserved. Reproduction in whole or in part is prohibited.</p>
</div>
<!-- /foot -->
</div>
<!-- /footer -->
</body>
</html>
See the Faq on the sticky footer for more info (note that the method you are using is actually mostly based on my methods anyway) .
I just answered a similar question in the thread here also.
Posting your code certainly goes faster. You can wait days for approval.
What background image, and on who does it tile??
I don’t use any of the code from that site. Frankly, I expect my users to not be so dumb as to resize a browser and then not hit f5 if it looks goofy (or am I weird for using it all the time to correct Firefox?). And I warn people against setting all padding to zero. That can turn into FAIL if you have forms. It’s not like divs come with padding in any browser anyway (the body does, but most of the time you won’t see it).
*edit what background images, where do you want them??