Solved

CSS Sticky Footer + Wordpress

Posted on 2008-10-20
10
912 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

Independent Software Vendors: 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!

Question has a verified solution.

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

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logiā€¦
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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