Main content div overlapping footer - html

Question

I've been attending a web design class and I started to work on my own to test some things. I set up a bunch of panels for the webpage and I found a problem when I made the footer.
Whenever my main body div starts to fill up and reaches the footer, it goes under the footer instead of adjusting the webpage and pushing it down. Any idea?
Picture of div going under:
body,
html {
background-color: #bee9e4;
height: 100%;
width: 100%;
}
.center {
text-align: center;
}
#banner {
background-color: lightgrey;
background: linear-gradient(to right, #99ffcc, white, #99ffcc);
border-style: groove;
}
#aboutme {
border-style: groove;
border-width: 2px;
border-color: lightblue;
box-shadow: 0px 2px 2px grey;
}
#wrapper {
min-height: 100%;
position: relative;
}
#middlepanel {
margin-top: 20px;
background-color: lightgrey;
margin-left: 21%;
width: 58%;
border-style: groove;
overflow: auto;
}
#bannerpic {
float: right;
margin: 5px 20px 10px 5px;
border-style: inset;
border-width: 7px;
border-color: lightblue;
padding: 3px;
box-shadow: 6px 6px 6px red;
}
#leftpanel {
float: left;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#rightpanel {
float: right;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
position: absolute;
bottom: 0;
left: 0;
}
#content {
padding-bottom: 75px;
/* Height of the footer element */
}
.videoleft {
float: left;
width: 45%;
}
.videoright {
float: right;
width: 45%;
}
#media only screen and (max-width: 640px) {
#leftpanel {
display: none;
}
#rightpanel {
display: none;
}
#footer {
display: none;
}
#middlepanel {
width: 100%;
margin-left: 0%;
}
}
.clearfloat {
clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-left: 5px;
}
<div id="infoaboutme">
<p>I am a Junior at //</p>
<p>I like to learn at school.</p>
<p>I love to spend time on the computer</p>
</div>
<br class="clearfloat">
</div>
<div>
<ul class="w3-navbar w3-card-2 w3-grey">
<li>
Mr. M
</li>
<li>
Home
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">My Favs<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Google
Twitch
Youtube
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">CHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Eli T
Ashley X
Andrew H
Savannah C
Robert G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">EHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Ethan P
Richard M
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MA<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Bryan H
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Tyler P
Neomi B
Tanis S B
Nicole C
Vic S
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MVHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Daniel C
Brendon S
Micah G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">RHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Cole P
Andrew W
Alexis B
Chase S
David B
</div>
</li>
</ul>
</div>
<div id="wrapper">
<div id="leftpanel">
<p>Test left float</p>
</div>
<div id="rightpanel">
<p>This is a test right float</p>
</div>
<div id="middlepanel">
<h1 class="center">Pictures taken for and of class!</h1>
<div id="slideShow" class="w3-content" style="max-width:600px;position:relative">
<div>
<div class="w3-display-container mySlides">
<img src="images/code.png" style="width:100%" height="360px" alt="code.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Code
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/class.JPG" style="width:100%" height="360px" alt="class.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/graded.JPG" style="width:100%" height="360px" alt="graded.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">[</a>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">]</a>
<script src="js/slideshow.js"></script>
</div>
</div>
<h1 class="center">Videos for the class!</h1>
<div class="videoleft">
<video width="100%" height="100%" controls>
<source src="videos/video_converted.ogg" type="video/ogg">
<source src="videos/video_converted2.webm" type="video/webm">
<source src="videos/video_converted3.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div class="videoright">
<video width="100%" height="100%" controls>
<source src="#" type="video/ogg">
<source src="#" type="video/webm">
<source src="#" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="footer">
<h3>Stest</h3>
</div>
</div>

Answer 1

Here's the source of your problem:
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
position: absolute; /* <--- REMOVES ELEMENT FROM NORMAL FLOW */
bottom: 0;
left: 0;
}
When you absolutely position an element, you remove it from the "normal flow" (also called "document flow"). This means that the element doesn't take up any space in the document and surrounding elements don't even know it exists.
Your main content div is overlapping the footer because the space is empty, as far as the content div is concerned. Before being absolutely positioned, the footer was more like a wall. After, it is more like a cloud, and surrounding elements go right through it.
There are two concepts you need to grasp in order to understand how this works:
CSS Positioning
CSS Normal Flow

Answer 2

Check the output in jsbin
Link to Jsbin
update ur css as follows
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
}
body,
html {
margin:0;
padding:0;
background-color: #bee9e4;
width: 100%;
}
.center {
text-align: center;
}
#banner {
background-color: lightgrey;
background: linear-gradient(to right, #99ffcc, white, #99ffcc);
border-style: groove;
}
#aboutme {
border-style: groove;
border-width: 2px;
border-color: lightblue;
box-shadow: 0px 2px 2px grey;
}
#wrapper {
min-height: 100%;
position: relative;
}
#middlepanel {
margin-top: 20px;
background-color: lightgrey;
margin-left: 21%;
width: 58%;
border-style: groove;
overflow: auto;
}
#bannerpic {
float: right;
margin: 5px 20px 10px 5px;
border-style: inset;
border-width: 7px;
border-color: lightblue;
padding: 3px;
box-shadow: 6px 6px 6px red;
}
#leftpanel {
float: left;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#rightpanel {
float: right;
background-color: lightgrey;
width: 20%;
border-style: groove;
overflow: auto;
}
#footer {
background-color: lightgrey;
border-style: groove;
overflow: auto;
width: 100%;
height: 75px;
}
#content {
padding-bottom: 75px;
/* Height of the footer element */
}
.videoleft {
float: left;
width: 45%;
}
.videoright {
float: right;
width: 45%;
}
#media only screen and (max-width: 640px) {
#leftpanel {
display: none;
}
#rightpanel {
display: none;
}
#footer {
position:relative;
top:50px;
}
#middlepanel {
width: 100%;
margin-left: 0%;
}
}
.clearfloat {
clear: both;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daniel's Intro Website</title>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/w3.css">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
</head>
<body>
<div id="banner">
<img id="bannerpic" src="images/graded.JPG" alt="class.jpg">
<h1 id="Welcome">Welcome!</h1>
<h4>Created by Daniel C.</h4>
<input id="aboutme" type="button" value="About Me!">
<div id="infoaboutme">
<p>I am a Junior at Mountain View High School.</p>
<p>I like to learn at school.</p>
<p>I love to spend time on the computer</p>
</div>
<br class="clearfloat">
</div>
<div>
<ul class="w3-navbar w3-card-2 w3-grey">
<li>
Mr. M
</li>
<li>
Home
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">My Favs<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Google
Twitch
Youtube
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">CHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Eli T
Ashley X
Andrew H
Savannah C
Robert G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">EHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Ethan P
Richard M
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MA<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Bryan H
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Tyler P
Neomi B
Tanis S B
Nicole C
Vic S
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">MVHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Daniel C
Brendon S
Micah G
</div>
</li>
<li class="w3-dropdown-hover w3-hover-light-grey">
<a class="w3-hover-grey" href="#">RHS<i class="fa fa-caret-down"> </i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
Cole P
Andrew W
Alexis B
Chase S
David B
</div>
</li>
</ul>
</div>
<div id="wrapper">
<div id="leftpanel">
<p>Test left float</p>
</div>
<div id="rightpanel">
<p>This is a test right float</p>
</div>
<div id="middlepanel">
<h1 class="center">Pictures taken for and of class!</h1>
<div id="slideShow" class="w3-content" style="max-width:600px;position:relative">
<div>
<div class="w3-display-container mySlides">
<img src="images/code.png" style="width:100%" height="360px" alt="code.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Code
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/class.JPG" style="width:100%" height="360px" alt="class.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<div class="w3-display-container mySlides">
<img src="images/graded.JPG" style="width:100%" height="360px" alt="graded.jpg">
<div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
Class
</div>
</div>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">[</a>
<a class="w3-btn-floating w3-hover-dark-grey" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">]</a>
<script src="js/slideshow.js"></script>
</div>
</div>
<h1 class="center">Videos for the class!</h1>
<div class="videoleft">
<video width="100%" height="100%" controls>
<source src="videos/video_converted.ogg" type="video/ogg">
<source src="videos/video_converted2.webm" type="video/webm">
<source src="videos/video_converted3.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<div class="videoright">
<video width="100%" height="100%" controls>
<source src="#" type="video/ogg">
<source src="#" type="video/webm">
<source src="#" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
</div>
<div id="footer">
<h3>Stest</h3>
</div>
</div>
</body>
</html>