Footer moving and sticking on lower resolutions - php

Question

I'm trying to build a page with a footer. It looks fine in 1600x900, but as soon as I scale down the footer moves to dead center and won't budge. Any suggestions would be appreciated
#Container{
width: 100%;
height: 100%;
position: absolute;
}
#Banner_Container {
position:relative;
width: 100%;
padding-bottom: 0.2%;
}
#Banner {
color: #FF7538;
font-style: oblique;
font-family: Courier New;
line-height: 1;
float: left;
}
#Index {
width: 80%;
background: rgba(250, 250, 250, 0.9);
border: 10px solid #ED9121;
border-style: outset;
padding-top: 2%;
float:left;
padding-bottom: 2%;
position: absolute;
margin-top: 30%;
min-width: 10%;
max-width: 80%;
}
#nav {
position: absolute;
margin: 0;
font-family: 'Roboto Condensed';
width: 15%;
float: right;
border: 5px solid #ED9121;
border-style: inset;
margin-top: 35%;
margin-left: 82%;
min-width: 5%;
max-width: 20%;
}
#footer{
width: 100%;
height: 50px;
position: absolute;
margin-top: 110%;
}
I was requested to do this in PHP
index.php
<?php
echo "<div id='Container'>";
include("banner.php");
include("navbar.php");
include("intro.php");
include("footer.php");
echo"</div>";
?>
So I have it separated like this
intro.php
<?php
echo "<div id='Index'>
<div id='Info'>
<img align='left' src='images/stock1.jpg'/>
<h2 align='left'>Welcome to East End Dental</h2>
<p>Ipsum</p><br><br><br><br><br><br><br><br><br><br>
<img align='right' src='images/stock2.jpg'/><br>
<h2 align='left'>Quality Guarantee</h2>
<p>Ipsum</p><br><br><br><br><br><br><br><br><br><br><br><br>
<div id='summary1'>
<center><h2>Our Dental Services</h2>
<img src='images/stock3.jpg'/></center>
<p>Ipsum<br><br></p>
</div>
<div id='summary2'>
<center><h2>Meet the Staff</h2>
<a href='staff.php'><img src='images/stock4.jpg'/></a </center>
<p>Ipsum.</p>
</div>
<div id='summary1'>
<center><h2>Contact Us Today</h2>
<img src='images/stock5.jpg'/></center>
<p>Ipsum</p><br><br>
</div>
</div>
</div>";
?>
footer.php
<?php
echo" <div id='footer'>
<center>
<p>Company Name 2016<br/>
Designed by <a href='mailto:email#gmail.com'>Name</a></p>
<a href='index.php'>Home</a> | <a href='services.php'>Services</a> | <a href='cerec.php'>CEREC®</a> | <a href='staff.php'>Staff</a> | <a href='contact.php'>Contact</a>
</center>
</div>";
?>

Answer 1

The problem is that you have the footer's margin-top set to 110% which will cause the footer to move around at different screen sizes. Percentage-based values are relative and change depending upon the parent container. I made a JSFiddle to show what this looks like with your code. The problem is faithfully reproducible by resizing the web browser.
To begin to fix this change your footer CSS. If you wanted a sticky/persistent footer that should would look something like this:
#footer{
width: 100%;
height: 50px;
position: absolute;
bottom: -50px;
}
I made a JSFiddle showing the solution so you can see this in action. This should address the footer floating to another location when the browser window resizes or is shown on a different device.
If you want the footer to just be at the bottom of the page and not stick there you would make this modification to the CSS:
#footer{
width: 100%;
height: 50px;
display: block;
clear: both;
}
This will just make sure the footer stays at the bottom of the content within the page and doesn't appear on the side of the previous element. Since you didn't specify if you were going for a stick footer I'm putting this in just to cover this other scenario.
In any case, hopefully this is the info you need to move forward on your website.