My footer overlaps my content (not always, I have created several flex/grid themed HTML's and they work fine, the footer gets pushed down to where it should be and when resizing the page the footer still recognizes the content and goes farther down).
The footer is responsive, the width / height change as the browser window is resized, so a .px value for the footer wouldn't work and I hope its not necessary.
Here is the code, and I will include the JSFiddle at the bottom of this content. I have tried some question-answers on Stack Overflow, but nothing seems to work.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr"><!-- InstanceBegin template="/Templates/Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<base target="_blank"/>
<script src="https://kit.fontawesome.com/0e803ef49c.js" crossorigin="anonymous"></script>
<style>@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Template</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<!-- Navigation Bar -->
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fa fa-bars"></i>
</label>
<label class="logo">MALLORCA<span>NOW</span></label>
<ul>
<li><a class="active"href="Index.html">Home</a></li>
<li><a href="Holiday-Rentals.html">Holiday Rentals</a></li>
<li><a href="#">Properties For Sale</a></li>
</ul>
</nav>
<!-- End Navigation Bar -->
<!-- Main Content -->
<!-- InstanceBeginEditable name="main-content" -->
<div class="main-content">
<div class="a-body">
<div class="a-box">
<span style="--i:1"><img src="Images/Slideshow/1.png"></span>
<span style="--i:2"><img src="Images/Slideshow/2.png"></span>
<span style="--i:3"><img src="Images/Slideshow/3.png"></span>
<span style="--i:4"><img src="Images/Slideshow/4.png"></span>
<span style="--i:5"><img src="Images/Slideshow/5.png"></span>
<span style="--i:6"><img src="Images/Slideshow/1.png"></span>
<span style="--i:7"><img src="Images/Slideshow/2.png"></span>
<span style="--i:8"><img src="Images/Slideshow/3.png"></span>
</div>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- End Main Content -->
<!-- Footer -->
<footer>
<div class="footer-main-content">
<div class="left box">
<h2>About Us</h2>
<div class="footer-content">
<p>Mallorca Now, established in 2010, specialise in Property Rentals, Sales and Management in the North East area of Mallorca, covering mainly Cala Ratjada, Cala Bona, Cala Millor and Cala Anguila (inc Porto Cristo Novo). </p>
<div class="social">
<a href="https://www.facebook.com/MallorcaNowInformationGuide/"><span class="fab fa-facebook-f"></span></a>
<a href="https://twitter.com/mallorcanow1"><span class="fab fa-twitter"></span></a>
<a href="https://www.instagram.com/mallorcanow/"><span class="fab fa-instagram"></span></a>
<a href="#"><span class="fab fa-youtube"></span></a>
</div>
</div>
</div>
<div class="center box">
<h2>Address</h2>
<div class="footer-content">
<div class="place">
<a href="https://goo.gl/maps/48EoKioLLJPXgBjD6"><span class="fas fa-map-marker-alt"></span></a>
<span class="text">Cala Bona, Mallorca</span>
</div>
<div class="phone">
<a href="tel:34676841886"><span class="fas fa-phone-alt"></span></a>
<span class="text">+34-676841886</span>
</div>
<div class="email">
<a href="mailto:[email protected]?subject=How can we help you?&body=Give us some more information..."><span class="fas fa-envelope"></span></a>
<span class="text">[email protected]</span>
</div>
</div>
</div>
<div class="right box">
<h2>Contact Us</h2>
<div class="footer-content">
<form action="#">
<div class="email">
<div class="text">Email *</div>
<input type="email" required>
</div>
<div class="msg">
<div class="text">Message *</div>
<textarea rows="2" cols="25" required></textarea>
</div>
<div class="btn">
<button type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<div class="bottom">
<center>
<span class="credit">Est. 2012 -<a href="#"> Mallorca-Now</a></span>
<span class="far fa-copyright"></span><span> - All Rights Reserved</span>
</center>
</div>
</footer>
<!-- End Footer -->
</body>
<!-- InstanceEnd --></html>
CSS (The last css style is the style applied to this HTML in particular):
@charset "utf-8";
/* CSS Document */
/* font-family: 'Montserrat', sans-serif; */
/*---------------------------------------- Page-Wide Styles ----------------------------------------*/
*{
padding:0;
margin:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
font-family: 'Montserrat', sans-serif;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline:; 1px solid slategrey;
border-radius:80px;
}
/*---------------------------------------- Navbar ----------------------------------------*/
nav{
background-color:#101010;
height:80px;
width:100%;
position:sticky;
z-index:1;
top:0;
overflow:hidden;
}
label.logo{
color:white;
font-size:35px;
font-weight:100;
line-height:80px;
padding:0 100px;
}
label.logo span{
font-weight:900;
}
nav ul{
float:right;
margin-right:20px;
}
nav ul li{
display:inline-block;
line-height:80px;
margin:0 5px;
}
nav ul li a{
color:white;
font-size:17px;
padding:7px 13px;
}
nav ul li a.active,nav ul li a:hover{
background:#6DD5FA;
transition:0.9s;
border-radius:4px;
}
.checkbtn{
font-size:30px;
color:white;
float:right;
line-height:80px;
margin-right:40px;
cursor:pointer;
display:none;
}
#check{
display:none;
}
@media (max-width: 952px){
label.logo{
font-size:30px;
padding-left:50px;
}
nav ul li a{
font-size:16px;
}
}
@media (max-width: 489px){
label.logo{
font-size:25px;
padding:0px 0px 0px 10px;
}
.checkbtn{
font-size:25px;
margin-right:20px;
}
nav ul li a{
font-size:0px;
}
}
@media (max-width:1000px){
.checkbtn{
display:block;
}
ul{
position:fixed;
width:100%;
height:100vh;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
top:80px;
left:-100%;
text-align:center;
transition:all .9s;
}
nav ul li{
display:block;
margin:50px;
line-height:30px;
}
nav ul li a{
font-size:20px;
}
a:hover,a.active{
background:none;
color:#0082e6;
}
#check:checked ~ ul{
left:0;
}
}
/*---------------------------------------- Footer ----------------------------------------*/
footer{
position:relative;
bottom:0;
width:100%;
background-color:#101010;
color:white;
}
.footer-main-content{
display:flex;
}
.footer-main-content .box{
flex-basis:50%;
padding:10px 20px;
}
.box h2{
font-size:1.125rem;
font-weight:600;
text-transform:uppercase;
}
.box .footer-content{
margin:20px 0 0 0;
position:relative;
}
.box .footer-content:before{
position:absolute;
content:'';
top:-10px;
height:2px;
width:100%;
background:#1a1a1a;
}
.box .footer-content:after{
position:absolute;
content:'';
height:2px;
width:15%;
background:#6DD5FA;
top:-10px;
}
.left .footer-content{
text-align:justify;
}
.left .footer-content .social{
margin:20px 0 0 0;
}
.left .footer-content .social a{
padding: 0 2px;
}
.left .footer-content .social a span{
height:40px;
width:40px;
background:#1a1a1a;
line-height:40px;
text-align:center;
font-size:18px;
border-radius:5px;
color:white;
}
.left .footer-content .social a span:hover{
background:#6DD5FA;
transition:0.9s;
}
.center .footer-content .fas{
font-size:1.4375rem;
background:#1a1a1a;
height:45px;
width:45px;
line-height:45px;
text-align:center;
border-radius:50%;
transition:0.9s;
cursor:pointer;
}
.center .footer-content a span{
color:white;
}
.center .footer-content .fas:hover{
background:#6DD5FA;
}
.center .footer-content .text{
font-size:1.0625rem;
font-weight:500;
padding-left:10px;
}
.center .footer-content .phone{
margin:10px 0;
}
.right form .text{
font-size:1.0625rem;
margin-bottom:2px;
color:#656565;
}
.right form .msg{
margin-top:10px;
}
.right form input, .right form textarea{
width:100%;
font-size:1.0625rem;
background:#151515;
padding-left:10px;
border:1px solid #222222;
color:white;
}
.right form input:focus,
.right form textarea:focus{
outline-color:#3498db;
}
.right form input{
height:32px;
}
.right form .btn{
margin-top:10px;
}
.right form .btn button{
height:40px;
width:100%;
border:none;
outline:none;
background: #6DD5FA;
font-size:1.0625rem;
font-weight:500;
cursor:pointer;
transition:0.3s;
color:white;
}
.right form .btn button:hover{
background:#000;
}
.bottom center{
padding:5px;
font-size:0.9375rem;
background:#151515;
}
.bottom center span{
color:#656565;
}
.bottom center span a{
color:white;
}
@media screen and (max-width:900px){
footer{
position:relative;
bottom:0px;
}
.footer-main-content{
flex-wrap:wrap;
flex-direction:column;
}
.footer-main-content .box{
margin:5px 0;
}
}
/*---------------------------------------- Main Content ----------------------------------------*/
.main-content{
min-height:;
background-color: #6DD5FA; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, #2980B9, #6DD5FA, #FFFFFF);
}
/*---------------------------------------- Rantaltest Styles ----------------------------------------*/
.a-body{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
}
.a-box{
position:relative;
width:200px;
height:200px;
}
And the JSFiddle https://jsfiddle.net/f46vzgwj/
As you can see in the JSFiddle, the footer starts overlapping the content, then finishes its box, and you can see the last of the content after the footer.
Set height: auto
.a-box{
position:relative;
width:200px;
height:auto; /* this was 200px */
}