Solved

CSS Sticky Footer + Wordpress

Posted on 2008-10-20
10
914 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
[X]
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
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

717 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