?
Solved

CSS Sticky Footer + Wordpress

Posted on 2008-10-20
10
Medium Priority
?
915 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 1000 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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 

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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

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