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 LAYOUT***/
#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; }
/***SIDEBAR ITEMS***/
.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; }
/***POST BOTTOM***/
.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; }
/***MISC***/
.box_space {width: 700px; height: 15px; }
.spacer {height: 20px; }<body>
<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><!--logo-->
<div id="nav">
<ul>
<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>
</ul>
</div><!--nav-->
<div id="slogan"><img src="src" alt="alt_txt"/></div><!--slogan-->
</div><!--header-->
<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"> </div>
<div class="post_content">
the_content()
</div><!--post_content-->
</div><!--post_right-->
</div><!--post_inner-->
</div><!--post-->
<div class="post_bottom">
<div class="post_bottom-inner">
<div class="comments_count">
<?php comments_number('0', '%', '%'); ?>
</div><!--comments_count-->
<div class="comments_link">
<a href="#"><img src="src" alt="Leave a comment" /></a>
</div><!--comments link-->
<div class="ratings">
RATINGS STARS
</div><!--ratings-->
</div><!--post_bottom_inner-->
</div><!--post bottom-->
<div class="rateme"> </div>
<div class="box_space"></div>
</div><!--page-->
<div id="sidebar">
<div id="search">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div><!--search-->
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</div><!--sidebar-->
</div><!--MAIN-->
<div id="footer">
<div id="footer_inner">
<p>This is a website</p>
</div><!--footer inner-->
</div><!--footer-->
</body>