Hi all
I have a simple page here with a header, content and a footer that sticks to the bottom of the page
http://www.ttmt.org.uk/footer/
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 thought I had this sorted but part of the layout that was left out of the first examples is causing me problems.
I want the layout to look like this, were the white content block stops before the header and the background is all around the header
http://www.ttmt.org.uk/footer/example5/
Using the code here for the sticky footer the content block has to go to the top of the window like this.
http://www.ttmt.org.uk/footer/example4/
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.
http://www.ttmt.org.uk/footer/example5/
Is it possible to do this and have the footer sit at the bottom.
Thanks in advance for any help any one can offer.
The example I put up was a simplified version of what I’m working with. I actually need something like this.
http://www.ttmt.org.uk/footer/example1.html
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 ?
Hi,
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.
Hi,
You could do it by repeating the body background on the header to make it appear continuous like so:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg);
}
#header {
width:912px;
margin:0 auto;
padding:70px 0 10px;
position:relative;
z-index:2;
background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg);
}
#header #logo {
float:left;
margin-right:6px;
}
#wrap {
width:912px;
margin:0 auto;
min-height:100%;
background:transparent url(http://www.ttmt.org.uk/footer/example4/content_bg.gif) repeat-y top right;
margin-top:-60px;
position:relative;
}
* html #wrap {
height:100%;
}
#main{
clear:both;
width:912px;
overflow:hidden;
position:relative;
z-index:2;
}
#footer {
width:912px;
margin:0 auto;
height:60px;
background:transparent url(http://www.ttmt.org.uk/footer/example4/footer_bg.gif) repeat-y top right;
}
#footerInner {
float:right;
}
#footerInner li {
display:inline;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* - negate effect of float*/
}
#wrap:after {
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"> </a><img id="logo" src="http://www.ttmt.org.uk/footer/example4/logo.png" alt="spa de dia Logo" /></a> <img id="logoh" src="http://www.ttmt.org.uk/footer/example4/header.jpg" alt="spa image" /> </div>
<!-- #header -->
<div id="main">
<div id="leftCon"></div>
<!-- #leftCon -->
<div id="rightCon"> </div>
<!-- #rightCon -->
</div>
<!-- #main -->
</div>
<!-- #wrap -->
<div id="footer">
<div id="footerInner">
<ul>
<li><a href="#">Link 1</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>
<!-- #footerInner -->
</div>
<!-- #footer -->
</body>
</html>
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.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
body {
background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg);
}
#header {
width:912px;
margin:0 auto;
padding:70px 0 10px;
position:relative;
z-index:2;
}
#header #logo {
float:left;
margin-right:6px;
}
#wrap {
width:912px;
margin:0 auto;
min-height:100%;
background:transparent;
margin-top:-60px;
position:relative;
}
* html #wrap {
height:100%;
}
#main{
clear:both;
width:912px;
overflow:hidden;
position:relative;
z-index:2;
}
#footer {
width:912px;
margin:0 auto;
height:60px;
background:transparent url(http://www.ttmt.org.uk/footer/example4/footer_bg.gif) repeat-y top right;
}
#footerInner {
float:right;
}
#footerInner li {
display:inline;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* - negate effect of float*/
}
#wrap:after {
clear:both;
display:block;
height:1%;
content:" ";
}
#bg {
position:absolute;
bottom:0;
right:0;
width:684px;
top:270px;
background:#fff;
z-index:1;
}
* html #bg {
height:999em;
top:auto;
}
* html #header{ background:url(http://www.ttmt.org.uk/footer/example4/bg.jpg)}
</style>
</head>
<body>
<div id="wrap">
<div id="header"> </a><img id="logo" src="http://www.ttmt.org.uk/footer/example4/logo.png" alt="spa de dia Logo" /></a> <img id="logoh" src="http://www.ttmt.org.uk/footer/example4/header.jpg" alt="spa image" /> </div>
<!-- #header -->
<div id="main">
<div id="leftCon"></div>
<!-- #leftCon -->
<div id="rightCon"> </div>
<!-- #rightCon -->
</div>
<!-- #main -->
<div id="bg"></div>
</div>
<!-- #wrap -->
<div id="footer">
<div id="footerInner">
<ul>
<li><a href="#">Link 1</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>
<!-- #footerInner -->
</div>
<!-- #footer -->
</body>
</html>
Either method should do what you want.
You must leave all the sticky footer code in place as you removed the fixes for IE7,8 and Opera.
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.
Paul O’B
Thanks again for your help with this.
Do you have an example where you explain your absolute overlay technique or could you explain what’s going on here
#bg {
position:absolute;
bottom:0;
right:0;
width:684px;
top:270px;
background:#fff;
z-index:1;
}
Oh. Looks like your doing the sticky wrong. Do it all this way instead. http://www.visibilityinherit.com/code/sticky-footer-demo.php
Hi,
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.
You can’t use 100% height here:
#contentwrap #content {
background:white;
height:100%;
height:auto;
}
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
That should be ok
The container does have a background color set to white
#contentwrap #content{
background:white;
height:100%;
height:auto;
}
Paul O’B
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.
http://www.ttmt.org.uk/footer/example2.html
I’m going to test now but can you see any problems this might cause.
Thanks again for your help.
Just either give the container a background color of white or a repeating y background image.