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


<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">
<th>Name</th><th>Username</th><th>Password</th><th>Access Level</th>
while ($data = mysql_fetch_array($result)){
//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>';
<?php include('../adminfooter.php'); ?>

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?


<?php /* this is the footer codes */ ?>
<div id="footer">
<hr width=1000px;>
<div id="logo"><?php //<img src="../images/logo.png" height="90px"> ?></div>
<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>

Currently the table overlap the footer.

Please help.

Thanks in advance.

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

ok, I just highlight the footer part:


#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; }

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 -->

a simple css can be as little as

    height: 100%;

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

            min-height:100%; /* this should fill up the entire body */


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



         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.