Footer won't stay at the bottom!

Footer won't stay at the bottom! Help on making a "sticky" footer?

#1 theinnernette

Group: Member
Posts: 2
Joined: 04-December 10

Posted 19 May 2011 - 07:11 PM

I love the theme I'm using on my website, (Corporattica), because it looked great!

...And then I purchased a monitor that wasn't from 2002.

Actually, everything still looks great but the footer is RIGHT beneath the body of the page. I looked up the tutorials for a "sticky" footer, but none seem to work.

HTML:

<body>
	<div id="bg">
		<div class="wrap"> (Content...)
		</div>
			
		<!-- footer -->
		<div id="footer">
			<div id="footerbg">
				
					<!-- footer links --><!-- /footer links -->
					
					<p id="copy"><span>Company Name</span></p>
					
					<div class="clear"></div>
			</div>
		</div>
		<!-- /footer -->
		
	</div>
</body>
</html>

CSS:

body { 
	font: .8em Arial, Verdana, Tahoma, Sans-Serif; 
	background: #f4f4f4 url(../images/bgtile.jpg) repeat-x; 
	color: #555; 
}

#bg { 
	background: url(../images/bg.jpg) no-repeat center top; 
}

.wrap { 
	margin: 0 auto; 
	width: 960px;
	height: 100%;
}

/* footer */
#footer { 
	clear: both; 
	color: #999; 
	background: url(../images/footertile.jpg) repeat-x;
	font-size: .9em;
	clear:both;
}
#footerbg {
	padding: 35px 0 15px 0;
	background: url(../images/footer.jpg) no-repeat center top;
}
#footer p {
	margin: 0 0 12px;
	padding: 6px 0;
	text-align: center;
}
#footer_menu {
	float: right;
	padding: 4px 0 0;
}
#footer a { 
	color: #999; 
	margin: 0 5px 0 0; 
	padding: 6px 10px;
	background: url(../images/dot.png) no-repeat left center; 
	border: 1px solid transparent;
}
#footer a:hover {
	border-color: #555;
}
#fleft {
	clear: both;
	padding: 25px 0 0;
	font-size: .94em;
}

#copy { 
	color: #777; font-size: 1.5em; 
}
#copy span {
	color: #999;
	text-align: center;
}

Any help would be greatly appreciated! Also, an explanation of the code would help immensely, as this is part of a school project, and the point of it is to learn.

#2 AstraNut

Group: Member
Posts: 329
Joined: 15-June 10

Posted 19 May 2011 - 09:07 PM

The template looks fine and seems to be XHTML coded. Do you have a link to the online layout you are currently using as posted code is not enough? You shouldn't need to use "sticky footer" coding with that template.

How to Do Templates:

How to Download and Edit a Template Video Tutorial: http://www.clantempl...L_and_Edit.html
How to Make a New Page Video Tutorial: http://www.clantempl...a_New_Page.html
How to Upload Your Template Video Tutorial: http://www.clantempl..._to_Upload.html

#3 theinnernette

Group: Member
Posts: 2
Joined: 04-December 10

Posted 20 May 2011 - 08:03 AM

http://www.solucija....te/corporattica

#4 schmelfhelp

Group: Member
Posts: 12
Joined: 14-September 09

Posted 24 May 2011 - 02:32 PM

This sticky footer has always worked for me
http://www.cssstickyfooter.com/

so if you compare it to what you have right now - your footer should be outside of the wrapper which contains the content (see below) - notice that i am moving the footer outside of the div that contains it (#bg div). This may break something else in the page - you may wanna check it out.

<div id="bg">
<div class="wrap"> (Content...)
</div>
</div> 


<div id="footer">
<div id="footerbg">



<p id="copy"><span>Company Name</span></p>

<div class="clear"></div>
</div>

</div>

Then you also need to set your css - including some general styles to the overall site

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#bg {min-height: 100%;}

.wrap {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
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*/
}

/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.



*/

As for explaining it all well have a read through the site this is from and then google away to find html tutorials.. sorry

It's late here but this should help for now.

hope it helps

Footer won't stay at the bottom! - Geeks to Go Forums