Some responsive problems in CSS - html

Question

I am creating a website and right now I am stuck.
As of now I am creating the dashboard of the website.
It has a header for the basic settings (Home, Profile and Log out) buttons.
Body which contains the navigation tools on the left and at the main body page which is located beside it.
And of course the footer below it.
It should look like this:
It fine like that but some how when I view it in using the "toggle device toolbar" under the devtools, it look like this:
How can I solve this overshoot.
Here is the code:
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="page-container">
<div id="content-wrap">
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div style="text-align: center;">
<div class="leftForm hide-on-med-and-down">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>

Answer 1

this is a problem that can be solved in many ways, the best way to solve footer issues (and header) in my opinion is following this trick: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
solution:
set a fixed height of your footer{ height: 10px} and set body{ margin-bottom: 10px}
UPDATE BASED ON COMMENTS
I am not able to see if this works as i cannot recreate the code in my environment.
CSS
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
margin-bottom: 81px;
position: relative;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}

Answer 2

Another possibily solution (I change php tag for this example, snippet seems not to work, maybe wv and wh doesn't work there, but it does if you try directly saving as html file, or try it here)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: calc(100% - 64px);
display: flex;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
</style>
</head>
<body>
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div id="page-container">
<div id="content-wrap">
<div style="text-align: center; width: 100vw;">
<div class="leftForm hide-on-med-and-down">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>