Sticky footer problem

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 :frowning:

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 :frowning:
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 :frowning:

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.

  • html #container{height:100%;}

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 &nbsp; &nbsp; <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.

Edit:

I should have refreshed the page before I posted as Ryan has also given you the same answer :slight_smile:

aah!
thanks paul,
I have just integrated Ryans code and it seems to have worked :wink:
Thankyou!

Glad we could help :).