hi all!
Could anyone please help me with a sticky footer problem…
Ive been trying a few different ones out and i just cant figure it out 
The page I am trying it on is here:
http://www.bluecrushdesign.co.za/insurance/help.html
Im trying the push div just inside the ending container div.
You can view the css I am using : http://www.bluecrushdesign.co.za/insurance/assets/css/travel.css
What am i doing wrong
if anyone could help id appreciate it!
Try adding in thios
[COLOR=#000000][FONT=Consolas]#container{margin-top:-42px;/*height of footer*/
min-height:100%;}
[/FONT][/COLOR]
thanks ryan!
i tried that…
now the site at the top is cut off
http://www.bluecrushdesign.co.za/insurance/help.html
ps . I have #container in the CSS in 2 places, at the top and at the bottom under the stickyfooter comments.
Sorry, make this header element and apply the following styles.
[COLOR=#000000][FONT=Consolas]<div id="header" style="border-top:42px solid transparent"><img src="assets/images/logo.png" width="77" height="79" alt="logo"> <div id="nav"> <ul> <li><a href="home.html">home</a></li> <li><a href="whatwecover.html">what we cover</a></li> <li><a href="help.html">help and emergencies</a></li> <li><a href="howtoclaim.html">how to claim</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="contact.html">contact</a></li> </ul> </div></div>[/FONT][/COLOR]
Also, on #container, remove that height:auto!important and height:100% crap. Don’t add that in there.
If you want IE6 support, add in this code.
Hi,
See the css faq for a full run down of how this works but here is the code added to your page.
<!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" />
<link href="assets/css/travel.css" rel="stylesheet" type="text/css" />
<title>Travel Insurance</title>
<style>
@charset "utf-8";
/* CSS Document */
body {
background-color:#E8E8E8;
background-image:url(http://www.bluecrushdesign.co.za/insurance/assets/images/back.png);
background-repeat:repeat-x;
font-family:Lucida Sans, Arial, Helvetica, sans-serif;
font-size: 13px!important;
margin: 0;
padding: 0;
}
a { color:#00BAE4; }
.floatleft { float: left; }
.floatright { float: right; }
#container {
width: 850px;
margin: 0 auto;
margin-top: 8px;
}
h1 {
font-size:27px;
color:#236C8B;
clear: both;
}
h2 {
color: #333333;
margin-top: 20px!important;
}
h3 {
font-size:20px;
color:#236C8B;
margin-top: 20px!important;
}
h4 {
font-size:14px;
color:#236C8B;
margin: 0;
padding: 0;
}
#nav {
float: right;
margin: 25px 0px 0px 0px;
}
#nav ul {
margin: 10px 0px 0px 0px;
padding: 0;
}
#nav ul li {
display:inline;
font-size: 15px;
margin-left: 19px;
}
#nav ul li a {
color:#000;
text-decoration: none;
}
#nav ul li a:hover { color: #999999; }
#quotehome {
width: 803px;
height: 171px;
background-image:url(http://www.bluecrushdesign.co.za/insurance/assets/images/quote.jpg);
margin: 75px 0px 30px 0px;
padding: 225px 0px 0px 45px;
}
#quotehome h1 { color:#FFF; }
.homecont {
width: 220px;
float: left;
color: #FFF;
}
.homecont input { margin-top: 4px; }
#content { margin-top: 25px; }
#helpnumber {
background-color:#5ABAED;
border-radius: 0.3em 0.3em 0.3em 0.3em;
padding: 20px;
color: #FFF;
font-size:24px;
margin: 40px 0px 0px 0px;
}
.bluehead { color: #24A4E8; }
.helpdiv {
float: left;
width: 370px;
margin-right: 20px;
padding: 10px 20px 20px 0px;
}
hr { margin: 40px 0px 0px 0px; }
/* content tabs home page */
ul.tabs {
margin: 20px 0px 0px 0px;
padding: 0;
float: left;
list-style: none;
height: 32px;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 32px;
line-height: 32px;
border-left: none;
margin-right: 7px;
background: #fff;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 1.2em;
padding: 0 20px;
outline: none;
color:#333333;
font-size:14px;
}
ul.tabs li a:hover { background-color: #CCCCCC; }
html ul.tabs li.active, html ul.tabs li.active a:hover { background-color: #fff!important; }
.tab_container {
border-top: none;
clear: both;
float: left;
width: 100%;
background: #ffffff;
color: #333333;
padding-top: 5px;
}
.tab_content {
padding: 0px 20px 20px 20px;
font-size: 12px;
}
.tab_content h2 {
font-weight: normal;
font-size: 15px;
margin: 0px 0px 8px 0px;
padding: 0px;
}
.tab_content h3 a { color: #254588; }
.tab_content img { }
/* content tabs home page */
#contactleft {
float: left;
width: 600px;
}
#contactright {
float: left;
width: 250px;
}
#contactright p {
margin: 0;
padding: 0px 0px 12px 0px;
}
label { display: block; }
.textfield {
width: 550px;
height: 24px;
margin-bottom: 15px;
}
.textfield2 { width: 180px; }
.textfield3 {
width: 40px;
margin-right: 20px;
}
textarea {
width: 550px;
height: 150px;
margin-bottom: 15px;
}
.submit {
display: block;
background-color:#236C8B;
padding: 5px 10px 5px 10px;
border: none;
color: #FFF;
margin: 10px 10px 10px 0px;
cursor:pointer;
}
.submit2 {
width: 186px;
height: 41px;
background-image:url(http://www.bluecrushdesign.co.za/insurance/assets/images/getaquote.png);
cursor:pointer;
border: none;
margin-top: 20px!important;
}
/*sticky footer */
/*sticky footer */
* { margin: 0; }
html, body { height: 100%; }
#container {
margin-top: -42px;/*height of footer*/
min-height: 100%;
clear:both;
}
* html #container{
height: 100%;
}
#header{border-top:42px solid #fff;zoom:1.0}
#footer {
background-color:#FFF;
padding: 12px;
font-size:11px;
clear: both;
margin: 0 auto;
width: 820px;
height: 18px;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
#container:after {
clear:both;
display:block;
height:1%;
content:" ";
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="http://www.bluecrushdesign.co.za/insurance/assets/images/logo.png" width="77" height="79" alt="logo" /></div>
<div id="nav">
<ul>
<li><a href="home.html">home</a></li>
<li><a href="whatwecover.html">what we cover</a></li>
<li><a href="help.html">help and emergencies</a></li>
<li><a href="howtoclaim.html">how to claim</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div id="content"> <img src="http://www.bluecrushdesign.co.za/insurance/assets/images/three.png" width="399" height="109" alt="travelinsurance" class="floatright"/>
<h1>Help & Emergencies</h1>
<div id="helpnumber">Call us on 086 345 890000</div>
<div class="helpdiv">
<h2>Worldwide 24 hour assistance</h2>
Alternatively, if you would like to call reverse charges, contact your local operator and ask to be connected to ..... </div>
<div class="helpdiv">
<h2>When you contact us</h2>
Provide as much of the following information as you can:
<ul>
<li>Your policy number.</li>
<li>A contact number for where you are now.</li>
<li>The nature of your problem.</li>
</ul>
If you are ill or injured we will need details of medical consultations you have had. </div>
</div>
<!--content -->
</div>
<!--container -->
<div id="footer"> © travel insurance company <a href="about.html">about us</a> / <a href="privacy.html">privacy policy</a></div>
</body>
</html>
Whatever method you use you always have to soak up the negative margin somehow. I prefer to do it at the top of the page as it avoids some bugs and is easier to maintain. I have added a header element to your page to soak up the negative margin.
The method you were using was an old and broken method that works only in a few browsers.
I should have refreshed the page before I posted as Ryan has also given you the same answer 
aah!
thanks paul,
I have just integrated Ryans code and it seems to have worked 
Thankyou!
Glad we could help :).