Hello all,

I know this is not new, and there are several different methods of keeping a footer stuck to the bottom of the page on the internet, and I have tried a few but no luck yet.

I have definitely done this before and gotten it to work, but I think my problem is that I have too many things inside of my wrapper div, and it's throwing it off.

Like I said, I tried several different methods on this particular design I'm doing and it hasn't worked yet. It does keep the footer at the bottom of the WINDOW at this point, but when I scroll down, the footer goes up with the page.

As of right now, the last method I am trying is the one at this link: http://bit.ly/aUcCCz

The URL to my page is http://masterpagesis.com/dev2

It is a WordPress theme. I deleted most of the PHP below just to clean up this preview. I would really appreciate it if anyone could give me a pointer if I'm going about a concept wrong. I know it seems messy the way that I have the Meta information set up with all of those divs, but I'm a bit scared to use absolutely positioned items, I'm afraid that it won't be consistent on all views. Any ideas? I really appreciate it!!

/***HTML ITEMS***/
* {margin: 0; }
html, body {height: 100%;}
body {margin: 0px; padding: 0px; font-family: verdana; background: url(images/main_bg.png) top left repeat-x; }
img {border: 0; }
a {text-decoration: none; color: #1e4caa;}
a:hover {text-decoration: underline; }
ul {list-style-type: none; }
ul li {padding-left: 17px; background: url(images/bullet.png) no-repeat;}

#main {width: 1024px; min-height: 100%;margin: 0 auto; position: relative; _height: 100%;  }
#header {width: 100%; height: 173px; padding: 20px; }
#logo {width: 357px; float: left; }
#slogan { padding-left: 100px; padding-top: 110px;  }
#nav {width: 667px; float: right; margin-top: 25px; }
#nav ul {list-style-type: none;}
#nav ul li {display: inline; padding: 0; background: none;  }
#nav ul li a {}
#page {width: 700px; float: left; }
#footer {position: relative; margin-top: -100px; }
#footer {border-top: 1px #9a9a9a solid; }
#sidebar {float: right; width: 290px; min-height: 300px; }

.sb_box {width: 300px; border: #9a9a9a 1px solid; padding: 10px; font-size: 14px;
	background: url(images/box_bg.png) #ffffff top left repeat-x;}
.sb_box h1 {padding-bottom: 5px;  }
.sb_box a {}
.sb_box ul {margin-left: -.5em; }
.sb_box ul li {}
.sb_box h1 {font-size: 22px; padding-left: 10px;  }

/***POST ITEMS***/
.post {width: 700px; min-height: 175px; border: #9a9a9a 1px solid; 
	background: url(images/box_bg.png) #ffffff top left repeat-x; }
.post-inner { padding: 15px; overflow: auto; }
.postthumb {float: left; margin-right: 20px; }
.post-right { }
.post_bottom {width: 700px; height: 37px; background: url(images/box_bottom_bg.png) top left repeat-x;
	border-top: 0; border-right: #9a9a9a 1px solid; border-left: #9a9a9a 1px solid; border-bottom:  #9a9a9a 1px solid; }
.post_bottom-inner {padding: 5px; }
.title a{font-size: 26px; color: #000000; margin-bottom: 20px; }

/***POST META***/
.meta_cont {width: 100%;  }
.meta_date {font-size: 10px; padding: 0 0 0 12px; margin: 7px 15px 0 0; float: left; background: url(images/date.png) center left no-repeat; }
.meta_cats {font-size: 10px;  margin: 7px 15px 0 0; padding-left: 14px; float: left; background: url(images/folder.png) center left no-repeat; }
.post-categories {margin: 0; padding: 0 0 0 20px; ; }
.post-categories li {list-style-type: none; display: inline;}
.post_content {font-size: 14px; margin-top: 7px; }

.rateme {margin-top: 2px; background: url(images/rateme.png) top right no-repeat; width: 650px; height: 22px; }
.comments_count {background: url(images/comments.png) no-repeat; float: left;
	width: 115px; height: 28px; font-size: 12px; padding: 3px 0 0 3px;}
.comments_link {float: left; }
.ratings {float: right; }
.ratingtext {display: none; }

.box_space {width: 700px; height: 15px; }
.spacer {height: 20px; }
 <div id="main">
  <div id="header">
   <div id="logo"><a href="<?php bloginfo('home'); ?>">
    <img src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="Dru Darby" /></a>
   <div id="nav">
	<li><a href="#"><img src="src" alt="Home"/></a></li>
	<li><a href="#"><img src="src" alt="About"/></a></li>
	<li><a href="#"><img src="src" alt="Services"/></a></li>
	<li><a href="#"><img src="src" alt="Portfolio"/></a></li>
	<li><a href="#"><img src="src" alt="Contact"/></a></li>
   <div id="slogan"><img src="src" alt="alt_txt"/></div><!--slogan-->
  <div id="page">
   <div class="post">
	<div class="post-inner">
	 <div class="postthumb"><img src="src" /></div><!--postthumb-->
         <div class="post-right">
          <div class="title"><a href="#">TITLE</a></div>
	  <div class="meta_cont">	
	   <div class="meta_date"><?php the_date(); ?></div>
	   <div class="meta_cats"><?php the_category(', '); ?></div>
	  </div><!--meta cont-->
	 <div class="spacer">&nbsp;</div>
         <div class="post_content">
     <div class="post_bottom">
      <div class="post_bottom-inner"> 
       <div class="comments_count">
	<?php comments_number('0', '%', '%'); ?>
       <div class="comments_link">
	<a href="#"><img src="src" alt="Leave a comment" /></a>
       </div><!--comments link-->

       <div class="ratings">
     </div><!--post bottom-->
     <div class="rateme">&nbsp;</div>
     <div class="box_space"></div>
   <div id="sidebar">
	<div id="search">
	 <?php include (TEMPLATEPATH . '/searchform.php'); ?>
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	<?php endif; ?>
<div id="footer">
 <div id="footer_inner">
  <p>This is a website</p>
 </div><!--footer inner-->

Recommended Answers

All 8 Replies

You could just do what Daniweb does with the tool bar at the bottom of this page:


You could just do what Daniweb does with the tool bar at the bottom of this page:


It's not EXACTLY what I was looking for, but it works great and is VERY easy, I do appreciate it!!

I check your site with Firebug Developer Tool. The DIV with unique ID 'main' is not correctly nested and it child element or content are out of the normal flow. It may be the float or absolute position. Add this to your code:

#main {
     overflow: hidden;
     margin-bottom: 33px; /* Add bottom margin for adding white spaces between the sticky footer and main div */
#footer {
     background: #FFFFFF; /* Add background-color to the footer and cover the underneath contents */

Hope this help.

I considered the overflow: hidden method, but it makes my right-border not display. Any thoughts?

What right border do you refer ? I guess that the the box at the right sidebar. The DIV with class name 'sb_box' has 300px width. The parent (sidebar) wrapper has only 290px width. 'sb_box' has also padding '10px' (all round) and border '1px' (all round). So the total width of the 'sb_box' is currently '322px'. It flow out '32px' from it parent. Remove the 'width' (it has already 100% width of it parent by default ) or use proper width which does not overflow from its parent.
Note that the real size of the element is the total of it's ( width + border + padding ).

THANK YOU! I should know this. What I've been doing is using two divs - one for the main element and its background, and one to set padding.

<div id="box">
   <div id="box_inner">

I give padding, etc to the box_inner. Is there a better method for this, or is it OK to do it this way?

Of course, it is better. If you need to set the width for the element and want to add the spaces between it's content and from the edge. Put another wrapper and give padding is prevent from the losing of it's original width. It is not mention that 'PADDING' and 'WIDTH' might not use together. That is OK if you will handle the manners.

Usually, using a separate div for the footer implies that it's not connected to the main div, so you can expect it to act differently than you imagined.

I would try to place it before the end tag of the main div, and float it to the left (or not, try both and see what's best). make sure it's not wider than the main one, or it will mess up the entire layout.

From your situation, i see you are treating the divs as if they were tables. The divs are easier to handle, in fact, and that without workarounds like special divs for positioning. You can use the margin and padding styles to specify the exact location of your content, and it will work the same in all browsers.

I would recommend you w3schools.org to learn more. otherwise, you can fix this blog, but you'll have the same problems in the future.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.