When attempting to place the "back to top" button on the right-hand side just above the footer, the footer disappears. I am striving to position the button just above the footer while ensuring it aligns correctly. Prior to adding the "back to top" button, there were alignment issues where it did not cover the left side of the page at the bottom.
I have explored solutions involving JavaScript/jQuery, but I am seeking to accomplish this using only HTML and CSS.
Edit: After removing unnecessary elements except for the table which seems to be causing the issue due to scaling problems on smaller screens. Additionally, there was an oversight in mentioning that it also affects the navbar, leaving space in the top-right corner, hence why that element remains.
<!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%;
}
...