Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

CSS Sticky Footer + Wordpress

Posted on 2008-10-20
10
911 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

765 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