Solved

CSS Sticky Footer + Wordpress

Posted on 2008-10-20
10
902 Views
Last Modified: 2013-11-19
HI, I'm trying to re-skin a WordPress blog, all was going well until I tried to put in a 'Sticky Footer'. Can anyone see where I'm going wrong, as it not quite sticking to the bottom?
/*

	STRUCTURE

*/
 

#sidebar 							{width:165px; float: right;}	

#main-col 							{width: 505px; float: left;}

body								{background-image:url(../images/vsj-blog_body-bg); background-repeat:repeat-x}

#page-wrap							{width: 960px; margin:0px auto -91px; min-height: 100%; height: auto !important height: 100%; }

/*

	FOOTER

*/
 

#footer								{height: 91px; background:url(../images/vsj-blog_footer_bg.jpg); background-repeat: repeat-x; padding-top: 20px;}

#footer-inside						{width: 960px; margin: 0 auto;}										

	
 

/*

	UTLITIES

*/

.clear								{clear: both;}

#push								{height: 91px;}			
 
 

/*

	HEADER

*/
 

h1#logo								{width: 428px; height: 65px;

									 background-image:url(../images/vsj-blog-logo.png); top left no-repeat; text-indent: -9000px;

			 						 margin: 30px 30px 30px 0px; float: left;}

			 

form#searchform						{margin: 0 0 10px 0; float: right;}

Open in new window

0
Comment
Question by:greenchilli
  • 4
  • 3
  • 3
10 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 22761754
What do you mean by not sticking to the bottom? Do you mean that if the page does not have 100% height, the footer is not at the very bottom of the screen?
0
 

Author Comment

by:greenchilli
ID: 22761805
I need to footer to always be at the bottom of the screen, even if there's not enough content to make it, does that make sense?
0
 
LVL 42

Accepted Solution

by:
David S. earned 250 total points
ID: 22761958
Change

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

to

<div id="push"></div>
</div>

and replace the existing rules with these:

#footer {
  height: 71px;
  padding-top: 20px;
  background: url(../images/vsj-blog_footer_bg.jpg) repeat-x;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}
#push {
  clear: both;
  height: 91px;
}
0
 

Author Comment

by:greenchilli
ID: 22762036
Thank you very much :)
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 22762061
What you want to do is very common, but it is nefariously difficult in CSS. Kravimir, a problem that might occur with your code is that a longer page will overrun the footer if it is absolutely positioned. In my experience, solutions involving fixed and absolute positioning often have those problems.

Your best bet is some variant of the min-height attribute, but it might be easier to use Javascript to position the footer. Because it is so tricky, it is often easier just to let the page be as it is; try to have enough content to push the footer all the way down. You'll find that to be the case in a lot of pages around the web.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 42

Expert Comment

by:David S.
ID: 22762147
I actually prefer using the min-height variant, but this one required fewer changes. The #push element prevents the problem you mentioned from happening.

Bah. There's no need to use JavaScript for this, unless you want to do it in IE5/Mac.
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 22762160
Oh, that is true. I had forgotten that solution. Good one :-)
0
 
LVL 42

Expert Comment

by:David S.
ID: 22762165
Hmm... I suppose I should say that I prefer one of the min-height variants. ;)

You're welcome, greenchilli.
0
 

Author Comment

by:greenchilli
ID: 22762238
the only problem I've noticed is when the screen is re-sized the footer moves up the page when scrolling..?

sample.jpg
0
 
LVL 42

Expert Comment

by:David S.
ID: 22762361
It's acting like it's got position:fixed. That's really weird.

You've got an error in your stylesheet: "background-image:url(../images/vsj-blog-logo.png); top left no-repeat;" should be "background: url(../images/vsj-blog-logo.png) top left no-repeat;" or just "background-image: url(../images/vsj-blog-logo.png);"

Also you've got an extra "div" end tag before the "body" end tag.

Use this new rule too:

#page-wrap {
  width: 960px;
  margin: 0 auto;
}
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now