The footer sticks to the bottom as I wanted but I also wanted the background of the content to stretch the full height of the page to touch the footer like in this image
I’ve got it partly working by putting the negative margin on the top of the footer to soak up top margin on the content but then I’m left with the space below the footer if you scroll down.
The background is a texture, the header and footer are the full width of the site but the content area that I need to be the full height from the header to the footer is narrower in width than the header and footer.
Can I use the example you suggested to achieve something like this ?
You can use the same techniques but you have to be creative and your header and footer would need ot be a fixed height for this to work.
Here’s an example. It uses the same techniques but all the neagtive margins and soak up methods must match the heights of the header and footer for this to work.
With the mottled body background the join shouldn’t be noticable.
You could also use my absolute overlay technique instead which doesn’t need the body background repeated on the header but uses a white overlay on the left column.
You need to set up a separate stylesheet for printing and create a simplified layout with no widths, no floats and no background colours (apart from white background and black text). Remove navigation and repeating non essential information when printing and usually remove any non essential foreground images.
You can’t just print a webpage “as is” because it was designed for the web not print. There is no such thing as a float on a piece of paper and you shouldn’t try to duplicate what you see on the webpage.
There are many articles that will help you with this.
The code is still working for what I’m doing but I noticed when I printed the browser (just for my reference) that the footer has doesn’t stick to the bottom on the print.
I’ve tested in Safari and Chrome on the Mac where the footer floats up, in Firefox on the Mac it prints with the footer at the bottom.
I don’t need to print the page like this, but for future reference - is this normal, is there a way to fix this.
Just put the white background on the container and give it the same width as the rest of the items.
You need a number of fixes to make that sticky footer more robust.
Here’s the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sticky Footer at Bottom</title>
<style type="text/css">
* {/* for demo only*/
margin:0;
padding:0
}
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
body {
background:#808080;
}
#outer {
width:900px;
background:#fff;
margin:auto;
min-height:100%;
margin-top:-100px;/*footer height - this drags the outer 100px up through the top of the monitor */
text-align:left;
}
* html #outer {
height:100%
}
#header {
border-top:100px solid #add8e6; /* soak up negative margin and allows header to start at top of page*/
height:150px;
background:#add8e6;
width:900px;
margin:auto;
}
#footer {/* footer now sits at bottom of window*/
width:900px;
margin:auto;
height:100px;/* must match negative margin of #outer */
clear:both;
height:100px;
background:yellow;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#outer:after {
clear:both;
display:block;
height:1%;
content:" ";
}
h1, h2, p {
padding:0 10px;
}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1>Sticky Footer</h1>
</div>
<h2>Ultimate Sticky footer that works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Chrome, Safari 3+ (and <a href="http://www.browsercam.com/public.aspx?proj_id=490004">probably every other modern browser</a>)</h2>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
See the css faq on the sticky footer for more details of the techniques used and how they work.
Even if it worked it would give you a hundred percent height form where it starts which would take you well below the fold and then your content would always be capped to that height and could never expand. See the faq on 100% height for a better explanation
Thanks for your code and explanation, thats nearly exactly what I was trying to do.
In your example the left column has the textured background used for the body’s background - I wanted the background to continue through the left column.
I have used you code but made the wrap div transparent and used a repeated gif down the right side to create the page.