The footer disappears when trying to get the "back to top" to the right-hand side just above the footer. I want to try to get the button just above the footer. Before I implemented the "back to top" button I was also having difficulty with it not being aligned correctly, as it not covering the left-side of the page on the bottom.
Also I've tried to find solutions to this but the ones I've found use javascript/jquery and I've got to make this using only html and css.
Edit: I've removed the unnecessary stuff, left the table in, as I think that's what's causing the problem as it doesn't scale well on the smaller screens. Also forgot to mention earlier it also results in the navbar having space left over to the top-right corner, which is why I've left that in as well.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="test.css" type="text/css" rel="stylesheet">
<a name="top"></a>
<div class="nav">
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title">
<a href="index.html" class="active">Link1</a>
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
</div>
</div>
<h1>Comments</h1>
<table id = "table">
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
<tr>
<td>html</td>
<td>Element</td>
<td>fdsfdddddddddddd ddddddd dffdfds fdfds</td>
</tr>
</table>
</td>
</tr>
<div class="btopbutton">
<a href="#top">Back to top</a>
<div>
<div class="footer">
<p><span> Website | Website | Copyright 2019</span></p>
<a href="#"> Link 1 </a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a></div>
</div>
</body></html>
@charset "UTF-8";
/*set background for whole page*/
html {
background-color: #26734d;
scroll-behavior: smooth;
margin: 0;
padding: 0;
width: 100%;
height: 100%;}
/*--start of nav bar--*/
* {
box-sizing: border-box;
}
.nav {
/* height: 50px;*/
width: 100%;
background-color: #4d4d4d;
position: relative;
}
.nav > .nav-header {
display: inline;
}
.nav > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}
.nav > .nav-btn {
display: none;
}
.nav > .nav-links {
display: inline;
float: center;
font-size: 18px;
}
.nav > .nav-links > a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #efefef;
text-transform: uppercase;
}
.nav > .nav-links > a:hover {
font-weight: bold;
/* background-color: rgba(0, 0, 0, 0.3);*/
}
:any-link {
color: #efefef;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
:any-link:hover {
font-weight: bold;
cursor: pointer;
}
.nav > #nav-check {
display: none;
}
/*--end of nav bar--*/
.heading1{
color:#FFFFFF;
}
/* Style the validation */
#validation{
text-align:center;
padding: 10px 10px;
}
.footer {
text-align: center;
padding-top:20px;
padding-bottom: 20px;
background-color: #1B1B1B;
color: #FFFFFF;
text-transform: uppercase;
font-weight: lighter;
letter-spacing: 2px;
border-top-width: 2px;
padding: 2px;
color:#ffffff;
width: 100%;
position: absolute;
font-weight: 200;
}
/*back to top button*/
.btopbutton
{
position: fixed;
bottom: 0;
right: 0;
text-align:right;
}
/*--table in comments section --*/
#table{
border: solid 1px black;
border-collapse: collapse;
width:100%;
text-align: center;
}
#table th{
border: solid 1px black;
border-collapse: collapse;
background-color: inherit;
}
#table td{
border: solid 1px black;
background-color: inherit;
border-collapse: collapse;
}
/*--end of table in the comments --*/
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* Moved Content Below Header */
.content {
margin-top:50px;
}
}
@media (max-width:600px) {
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav > .nav-btn > label:hover,.nav #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav > .nav-links {
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
}
.nav > .nav-links > a {
display: block;
width: 100%;
}
.nav > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.nav > #nav-check:checked ~ .nav-links {
height: auto;
overflow-y: auto;
}
}
@media (max-width:300px){
#table p{
width:100%;
text-align: justify;
}
#table ul{
width: 58%
}
#table tr{
display: inline-flex;
width: 100%;
}
#table th{
width: 100%;
}
}
I would suggest the following:
.nav {
/* height: 50px;*/
width: 100%;
background-color: #4d4d4d;
position: relative;
}
Here you have the relative nav 'parent', so the absolute position children are going to be placed in that context. Talking about the .footer, you have placed absolute position, but with no relative parent, and without bottom, and right 0 etc. So for the footer try to make another div with class name .wrapper positioned relative to the document's flow, and then inside that parent position your footer div's. Same will happen with the button fixed position.