Pushing the admin footer down

[davy_yg]

Hello,

I am trying to find a way to push the admin footer down. How?

admin/access.php

<button type="button" onClick="parent.location='edit_teacher_access.php'">Add Teacher</button><br><br>
<h3>Teacher Access:</h3><br>
<table id="admintable" border="1" cellpadding="2" cellspacing="0" width="700px">
<tr>
<th>Name</th><th>Username</th><th>Password</th><th>Access Level</th>
</tr>
<?php
$i=0;
while ($data = mysql_fetch_array($result)){
$result2=($i%2)?'#DFA09D':'white';
//echo "<tr bgcolor='$result2'>";
//echo '<td>'.$data['page'].'</td>';
//echo "<td><a href='post.php?post_id=".$data['post_ID']."'><img src='../images/post.jpg'></a></td>";
//echo '</tr>';
echo "<tr bgcolor='$result2'>";
echo '<td><a href="edit_teacher_access.php?teach_id='.$data['teach_id'].'">'.$data['teach_fname'].'</a></td>';
echo '<td>'.$data['teach_username'].'</a></td>';
echo '<td>'.$data['teach_password'].'</a></td>';
echo '<td>'.$data['access_level'].'</td>';
echo '</tr>';
$i++;
}
?>
</table>
</form>
</div>
</div>
</center>
</div>
</div>
<br><br><br><br><br><br>
<?php include('../adminfooter.php'); ?>
</body>
</div>
</div>
</html>

This is for user access. Whenever the user enter a new data, the footer must be pushed down but this is not the case. Therefore the new data begin to overlap in the footer. How to push the footer down?

adminfooter.php

<?php /* this is the footer codes */ ?>
<div id="footer">
<hr width=1000px;>
<center>
<div id="logo"><?php //<img src="../images/logo.png" height="90px"> ?></div>
</center>
<center><?php /*
<div id="admfooternav"><a href="admin.php">Admin</a> | <a href="Admin.php">User</a> | <a href="Admin.php">Pages</a> | <a href="input_image.php">Image Gallery</a></div>
*/ ?></center>
<div id="netlink"><a href="http://www.rustoleum.com"></a></div>
</div>

Currently the table overlap the footer.

Please help.

Thanks in advance.

[DJBirdi]

Hmm, this is most likely a CSS issue rather than HTML/PHP. Let's see your stylesheet.

[davy_yg]

ok, I just highlight the footer part:

admin.css

#footer {height: 160px; background-color:#bcbdc0;}
#footernav {margin: -30px 0 0 250px; font:Arial; }
#footernav a:link {font:Arial; color:black; text-decoration:none;}
#footernav a:hover {font:Arial; color: red; text-decoration:none;}

#address {margin: -40px 0 0 800px; padding: 20px; position: absolute; align: left; font:Arial; font-size: 11px; color:black; }
#netlink a{margin: -20px 0 0 100px; position: absolute; font: Arial; color: black; text-decoration:none; }

[veedeoo]

IMHO, the only way to push the footer down and keep it there is to have a wrapper that will have a minimum height of 100% and then we can place the header, content and footer inside this wrapper. The content div must have a bottom padding equivalent to the height of the footer.

something like this

<div class="wrapper">
    <div class="header"> header here </div>

        <div class="content">content here</div>

            <div class="footer"> footer here</div>
<!-- end of wrapper -->
</div>

a simple css can be as little as

html
body{
    height: 100%;
    }

/* we define our wrapper to have 100% height. */

.wrapper{
            min-height:100%; /* this should fill up the entire body */
            position:relative;
        }

 .content{

                padding-bottom:150px;  /* this should be the desired height of the footer */

        }

 .footer{

         height:150px;
         bottom:0;
         position:absolute; /* I am not sure, but this should be important */
       }     

Others may have a better idea. I must admit, I am not so savvy with advance CSS, because I don't normally write these stuffs from the scratch. I always have someone do it or just use either bootstrap or foundation.