The point is that I can't get the footer section of the code to display at the bottom of the page. Right now it's located at the bottom section of the webpage as it opens, as if it was "position fixed", which is not what I want.
I want it to display like this:
I'm adding a snippet here too but, since I don't know how to keep each file separated from each other, I'm simply adding every CSS and JS file together in the snippet (separated with a few empty lines).
(At the end I'm adding some focused code regarding the footer, for the sake of readability.)
var mini = true;
function toggleSidebar() {
if (mini) {
document.getElementById("mySidebar").style.width = "25%";
this.mini = false;
} else {
document.getElementById("mySidebar").style.width = "30px";
this.mini = true;
}
}
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}body {
background-color: rgb(68, 66, 70);
height: 100%;
min-height: 100%;
margin: 0;
width: 100%;
}
/* Main content section */
.main-content {
position: relative;
top: 170px;
min-height: 100%;
}
.content-wrap {
width: 100%;
padding-bottom: 5rem;
padding-right: 30px;
}
/* Welcome section box */
.welcome-section-container {
background-color:blanchedalmond;
background-image: url(https://www.todofondos.net/wp-content/uploads/wood-hd-wallpaper.jpg);
background-position: 50% 40%;
background-size: 100%;
margin: auto;
margin-top: 1%;
width: 95%;
border: 2px solid #333;
padding: 0px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border-radius: 10px;
}
.welcome-section-container h1 {
text-align: center;
color: white;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #333;
}
.welcome-text-box {
background-color: rgb(44, 29, 10);
opacity: 85%;
padding-top: 1px;
border-radius: 7.5px;
}
.welcome-section-container p {
margin: 2%;
font-size: 20px;
color: white;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 0.2px;
-webkit-text-stroke-color: black;
}
/* Latest news section box */
.news-section-container {
background-image:url(https://i.gifer.com/WuBj.gif);
background-size: 100%;
margin: auto;
margin-top: 1%;
width: 95%;
border: 2px solid #333;
padding: 10px;
border-radius: 10px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.news-section-container h1 {
text-align: center;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1.3px;
-webkit-text-stroke-color: #333;
}
.column {
float:left;
background-color: rgb(206, 202, 168);
opacity: 0.85;
margin: 1%;
margin-left: 2%;
width: 30%;
border: 2px solid #333;
padding: 10px;
height: 350px;
overflow: auto;
}
/* Hide scrollbars from the news section */
.column::-webkit-scrollbar {
display: none;
}
.column h2 {
text-align: center;
margin-top: 0;
opacity: 1;
}
.column p {
text-align: center;
margin:10%;
margin-top: 0;
opacity: 1;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer section */
.footer-container {
background-color: #333;
background-size: 100%;
position: absolute;
bottom: 0;
width: 100%;
max-height: 5rem;
}
.footer-column-left {
float: left;
margin-left: 15%;
width: 25%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footer-column-left p {
font-size: 12px;
margin-bottom: -10px;
}
.footer-column-mid {
float:left;
margin-left: 0;
width: 20%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footer-column-mid p {
color: aliceblue;
}
.footer-column-right {
float:right;
margin: 1%;
width: 30%;
overflow: auto;
}
.footer-column-right a {
float: right;
margin-right: 50px;
}
.footer-column-right a img {
height: 40px;
}
@media screen and (max-width: 600px) {
.footer-container {
position: absolute;
bottom: 0px;
width: 100%;
max-height: 5rem;
}
.footer-column-mid {
font-size: 75%;
}
.footer-column-left {
margin-left: 8%;
}
.footer-column-left p {
font-size: 10px;
}
.footer-column-right a img {
margin-top: 10px;
height: 21px;
}
}
/* Logo resize */
.logo-container {
max-width: 0px;
max-height: 0px;
margin-bottom: -3px;
left: 0;
position: absolute;
}
.logo {
width: 180px;
height: 48.5px;
object-fit: cover;
object-position: 50% 42%;
}
/* top navigation */
.topnav {
position: fixed;
z-index: 1;
width: 100%;
top: 0;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
position: relative;
left: 38%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: rgb(228, 228, 228);
color: rgb(68, 66, 70);
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #616161;
color: rgb(228, 228, 228);
}
/* Style the search box inside the navigation bar */
.topnav input[type=text] {
float: right;
position: relative;
right: 40px;
padding: 6px 10px;
border: none;
margin-top: 10px;
margin-right: 16px;
font-size: 17px;
border-radius: 10px;
}
.topnav .search-container button {
float: right;
position: absolute;
right: 15px;
padding: 6px 10px;
margin-top: 10px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
border-radius: 50%;
}
.topnav .search-container button:hover {
background: #ccc;
border-radius: 50%;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
@media screen and (max-width: 1020px){
.search-container{
display: none;
}
}
@media screen and (max-width: 1020px) {
.topnav a.icon {
float: left;
display: block;
}
}
@media screen and (max-width: 1020px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
float: left;
right: 0;
top: 0;
}
.topnav.responsive .search-container{
float: none;
display: block;
text-align: left;
}
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: left;
margin-left: 48%;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive {
position: fixed;
top: 0;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .search-container{
float: none;
display: block;
text-align: left;
}
}
.sidebar {
height: 100%;
width: 30px;
position: fixed;
display: flex;
top: 0;
right: 0;
background-color: #222;
padding-top: 60px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
overflow: auto;
border-left: 3px solid #111;
transition: 0.5s;
}
.sidebar::-webkit-scrollbar {
display: none;
}
/*Visible box with the arrows*/
.arrow {
padding-left: 6px;
margin-right: 14px;
min-height: 100%;
max-width: 20px;
color: #ccc;
position: relative;
flex-basis: 30px;
display: table;
}
.arrow p {
display: table-cell;
vertical-align: middle;
font-size: 25px;
}
/* Hidden box with the multimedia */
.multimedia {
background-color: #ccc;
height: 80px;
margin-right: 30px;
}
.multimedia h1 {
text-align: center;
color: #333;
}
/* Videos and pictures on the sidebar scrolling */
.multimedia-container img {
width: 100%;
height: auto;
margin: auto;
margin-right: 30px;
}
.multimedia-container iframe {
width: 100%;
height: auto;
margin: auto;
margin-right: 30px;
}
/* Adapt heading to size */
@media screen and (max-width: 1020px) {
.multimedia h1 {
font-size: 18px;
}
.multimedia {
height: 25px;
}
}
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
position: absolute;
min-width: 100%;
top: 48px;
}
/* Fading animation */
.mySlides {
animation-name: fade;
animation-duration: 2.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}<!DOCTYPE html>
<html>
<head>
<title>
HomePage
</title>
<link type="text/css" href="style.css" rel="stylesheet">
<link type="text/css" href="slideshow-style.css" rel="stylesheet">
<link type="text/css" href="topnav-style.css" rel="stylesheet">
<link type="text/css" href="sidebar-style.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images -->
<div class="mySlides fade">
<img src="https://ca-times.brightspotcdn.com/dims4/default/f652f70/2147483647/strip/true/crop/5389x3153+0+0/resize/1486x869!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Fa9%2F5b%2Fc621f3bc408e95c16b4538d87578%2Fla-photos-1staff-amazonstudios-210802a.jpg"
style="position: absolute; width: 100%; height: 130px; object-fit: cover; object-position: 50% 37%;">
</div>
<div class="mySlides fade">
<img src="https://i.pinimg.com/originals/c5/6b/d1/c56bd1d016ccd315aa9e8d3ec3c78bb7.png"
style="width: 100%; height: 130px; object-fit: cover; object-position: 50% 46%;">
</div>
<div class="mySlides fade">
<img src="https://wallpaperaccess.com/full/3203467.jpg"
style="width: 100%; height: 130px; object-fit: cover; object-position: 50% 63%;">
</div>
</div>
<!-- The Navbar -->
<div class="topnav" id="myTopnav">
<!-- The logo -->
<div class="logo-container">
<img class= "logo" src="https://img.freepik.com/vector-gratis/logo-lorem-ipsum-eslogan-aqui-plantilla-arte-diseno_647943-2.jpg?w=2000"
alt="logo">
</div>
<!-- The buttons -->
<a href="index.html" class="active">HOME</a>
<a href="news.html">NEWS</a>
<a href="#history">HISTORY</a>
<a href="#guide">GUIDE</a>
<!-- The searchbar -->
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<!-- Responsiveness to small window with a button -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</header>
<main>
<div class="main-content">
<div class="content-wrap">
<!-- Welcome section box -->
<div class="welcome-section-container">
<h1>Welcome Section</h1>
<div class="welcome-text-box">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue,
eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
porttitor, facilisis luctus, metus
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<br>
</div>
</div>
<!-- Latest news box -->
<div class="news-section-container">
<h1>Latest News</h1>
<div class="row">
<div class="column">
<h2>TITLE</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper.
</p>
</div>
<div class="column">
<h2>TITLE</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper.
</p>
</div>
<div class="column">
<h2>TITLE</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
sit amet quam egestas semper.
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<sidebar>
<div class="sidebar" id="mySidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()">
<div class="arrow"><p>❮</p>
</div>
<div class="multimedia">
<h1>Multimedia</h1>
<div class="multimedia-container">
<iframe src="https://www.youtube-nocookie.com/embed/EApCLbgAE5E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen alt="Forth Eorlingas Scene"></iframe>
<img src="https://i.kym-cdn.com/entries/icons/original/000/002/144/You_Shall_Not_Pass!_0-1_screenshot.jpg" alt="You shall not pass"></img>
<iframe src="https://www.youtube-nocookie.com/embed/EApCLbgAE5E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen alt="Forth Eorlingas Scene"></iframe>
<img src="https://i.kym-cdn.com/entries/icons/original/000/002/144/You_Shall_Not_Pass!_0-1_screenshot.jpg" alt="You shall not pass"></img>
<iframe src="https://www.youtube-nocookie.com/embed/EApCLbgAE5E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen alt="Forth Eorlingas Scene"></iframe>
<img src="https://i.kym-cdn.com/entries/icons/original/000/002/144/You_Shall_Not_Pass!_0-1_screenshot.jpg" alt="You shall not pass"></img>
</div>
</div>
</div>
</sidebar>
<footer>
<!-- Footer container -->
<div class="footer-container">
<div class="footer-column-left">
<p><a href="#link1">LINK 1</a></p>
<p><a href="#link2">LINK 2</a></p>
<p><a href="#link3">LINK 3</a></p>
</div>
<div class="footer-column-mid">
<p>© 2022 Alejandro L. Herrero - Copyright Section</p>
</div>
<div class="footer-column-right">
<a href="https://github.com/AlejandroLuisHC">
<img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub">
</a>
<a href="https://www.linkedin.com/in/alejandro-luis-herrero-conesa-5418128b/?originalSubdomain=es">
<img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn">
</a>
</div>
</div>
</footer>
<script type="text/javascript" src="topnav.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript" src="sidebar.js"></script>
</body>
</html>Footer CSS code:
/* Footer section */
.footer-container {
background-color: #333;
background-size: 100%;
position: absolute;
bottom: 0;
width: 100%;
max-height: 5rem;
}
.footer-column-left {
float: left;
margin-left: 15%;
width: 25%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footer-column-left p {
font-size: 12px;
margin-bottom: -10px;
}
.footer-column-mid {
float:left;
margin-left: 0;
width: 20%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.footer-column-mid p {
color: aliceblue;
}
.footer-column-right {
float:right;
margin: 1%;
width: 30%;
overflow: auto;
}
.footer-column-right a {
float: right;
margin-right: 50px;
}
.footer-column-right a img {
height: 40px;
}
@media screen and (max-width: 600px) {
.footer-container {
position: absolute;
bottom: 0px;
width: 100%;
max-height: 5rem;
}
.footer-column-mid {
font-size: 75%;
}
.footer-column-left {
margin-left: 8%;
}
.footer-column-left p {
font-size: 10px;
}
.footer-column-right a img {
margin-top: 10px;
height: 21px;
}
}
`, you shouldn't need to do anything at all to keep it at the very bottom of the page. Normal block level element rendering will take care of it.
– Scott Marcus May 16 '22 at 18:40