Css Sticky Footer on current theme

**Damiantos** · Nov 9, 2012 05:00

I am currently editing a theme to suit my needs for my website on wordpress. I want to be able to make it a sticky footer im not the best at coding.

I would imagine you would need to have a look at what my #header looks like so here goes

Code CSS:

#footer {
	clear: both;
	margin: 0 auto;
	padding: 30px 0;
	font-size:8pt;
	background:#000;
	color:#ccc;
	text-align:center;
	}
 
.footurl {
	margin-bottom: 10px;
	}
 
.clearfix:after,
blockquote:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
 
.clearfix,
blockquote {
	display: inline-block;
	}
 
/* Hides from IE-mac \*/
* html .clearfix,
* html blockquote {
	height: 1%;
	}
.clearfix,
blockquote {
	display: block;
	}
/* End hide from IE-mac */
 
/* -------------------[ Headings ]------------------- */

eventually I will have a go at coding my own template/ theme but until I have time I would like to work with what I have.

Many Thanks
Damien

Awesome forum btw will be sticking (no pun intended) around.

**ralph.m** · Nov 9, 2012 06:25

Hi Damiantos. Welcome to the forums.

Sticky footers are tricky things, and CSS is not really designed for them, so they require some deft coding. Here is a definitive guide to getting thme to work reliably:

http://www.sitepoint.com/forums/show...66#post1239966

See if that makes any sense. If not, we really need a live link to your site to see what's involved.

**Damiantos** · Nov 9, 2012 07:43

Thanks Ralph, this would be fantastic if i wasnt working on a current very complex theme. Because the theme im using wp-clear has so many pages I just cant seem to get it working.

**Paul O'B** · Nov 9, 2012 08:16

Hi,

For a sticky footer to work you need to have this basic structure:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	height:100%;/* need to have height to base min-height on */
	margin:0;/* no margin or padding or 100% becomes 100% + margin/padding and therefore too big to start with*/
	padding:0
}
/* all content except for the footer goes here */
#outer {
	min-height:100%;/* reach the bottom  of the viewport*/
	margin-top:-100px;/* match footer height*/
	background:red;
}
* html #outer { height:100% }/* ie6 doesn't understand min-height*/
#header { border-top:100px solid #fff;/* match footer height and absorb negative margin on #outer*/ }
#footer {
	clear:both;
	height:100px;/* must be a known height*/
	background:blue;
}
</style>
</head>

<body>
<div id="outer">
		<div id="header">Header</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

If your wordpress pages don't fit into that structure then you won't be able to have a sticky footer I'm afraid. If you can massage your pages into that structure then check the sticky footer faq Ralph pointed to for all the other little browers fixes that go with it. However the html is basically the same as I have shown.

You need one page wrapper that must hold all your content apart from the footer. You cannot have other elements outside that wrapper or all the measurements will be wrong (you can actually have the odd fixed height element outside that structure but then you would need to adjust all the negative margins and it gets even more complicated).

If you page isn't suitable for a sticky footer then maybe a fixed footer would be appropriate -assuming its a relatively small footer as large fixed footers are not much use as they obscure too much content.

User Tag List

Thread: Css Sticky Footer on current theme

Thread Tools

Display

Css Sticky Footer on current theme

Bookmarks

Bookmarks

Posting Permissions