Footer not showing the way I would like to - php

Question

So, I've been trying for some time now to figure out how to position a footer correctly. I was browsing some already-asked questions here on SO and I found some ideas which I implemented but that didn't make my footer to work.
Here is the basic explanation. I have bellow written code for my footer. The problem is that the footer "fly" in page if post is not long. I'm coding (better say rewritting) a simple CMS from C to PHP and I'm not into CSS or design overall.
Here is the code:
#footer {
position: static;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
Single post view (bad, you see white space left bellow the footer):
(source: easycaptures.com)
Few posts that filled whole page (good, footer bellow pagination):
(source: easycaptures.com)
On the other side when I have position set to fixed I have this overflow:
(source: easycaptures.com)
How do I make my code works fine like in picture where it says (good)?
EDIT: For those who say to change position, I've already tried all positions property (static, absolute, fixed, relative, inherit).
Here is my container code:
#contener {
margin: 0 auto;
text-align: left;
width: 100%;
}
Other:
body, html, #menu, img, a img, form, fieldset {
margin:0;
padding:0;
font-size: 12px;
}
When I set position to "absolute" I got this picture.
Here is my full code of pagination + footer:
<?php
$currentPage = 1;
if(isset($_GET['page'])){
$currentPage = protect_sqli($_GET['page']);
}
$e = $currentPage * $num_psts; // end post
$p = $e - $num_psts+1; // start post
$i = 0;
// Create a connection
$conS = mysqli_connect($hName, $dbUser) or die(mysql_error());
// Select a specific database
mysqli_select_db($conS, $dbName) or die(mysql_error());
// Query creating
$result = mysqli_query($conS, "SELECT * FROM posts ORDER BY dat DESC, tim DESC");
while($row = mysqli_fetch_array($result))
{
$i++;
if($i >= $p && $i <= $e)
{
$postId = protect_sqli($row['slug']);
readfile('p/' . $postId . '.php');
}
}
?>
<center>
<p>
<?php
$result = mysqli_query($conS, "SELECT id FROM posts");
$nPosts = mysqli_num_rows($result); // number of posts
mysqli_close($conS);
echo "Pages: ";
$pages = $nPosts/$num_psts; // number of pages
for($i = 1; $i < $pages+1; $i++)
{
if($i == $currentPage)
{
echo "<strong>".$i."</strong> ";
}
else
{
echo "". $i ." ";
}
}
?>
</p>
</center>
<div id="footer">
<?php readfile(__DIR__ . "/mvc/fe/footer.php"); ?>
</div>
</div>
footer.php:
Made by dn5 | <font color="#e1c1aa">cblogphp</font>

Answer 1

Do you mean a sticky footer which is always on the bottom of your site?
The CSS goes like this:
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}

Answer 2

I think what you are looking for is a Sticky Footer. Ryan Faits has some clear instructions here

Answer 3

Try changing the position to absolute:
#footer {
position: absolute;
background: #346 repeat scroll 0 0;
border-top:3px solid #CCCCCC;
clear: both;
color:#FFFFFF;
font-size:x-small;
line-height:100%;
margin: 2em 0 0;
width: 100%;
text-align: center;
padding:3px 10px 10px;
bottom: 0;
}
Demo: http://jsfiddle.net/JE5fn/1/

Answer 4

From CSS tricks: http://css-tricks.com/snippets/css/sticky-footer/
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}