I need the images and links that are in the footer to be at the bottom of the footer, and the footer needs to still be at the bottom of the page.
I have tried using position: absolute and bottom properties and played with the margin properties but nothing I do seems to work any help would be much appreciated here.
body {
padding: 0;
margin: 0;
}
.headerBackgroundImage {
/* The image used */
background-image: url("../Images/headerImage.jpg");
min-height: 318px;
/* Center the image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
/* Code that applies only to the logo to position it and make sure it is infront of the background */
#logo {
position: relative;
display: block;
margin-left: 850px;
width: 15%;
top: 20px;
}
/* Position the navigation bar container inside the image */
.container1 {
position: absolute;
bottom: 0px;
}
/* Another container for the second part of the navigation bar */
.container2 {
position: absolute;
bottom: 0px;
right: 0;
}
/* The navigation bar */
.topnav {
overflow: hidden;
}
/* The links/words in the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: underline;
font-size: 50px;
font-weight: bold;
}
/* What happens to the links/words in the navigation bar once it is hovered over */
.topnav a:hover {
text-decoration: none;
}
.ImageColumn {
float: right;
width: 780px;
}
#ImageColumnImages {
width: 100%;
height: 40%;
padding-bottom: 10px;
}
footer {
left: 0;
bottom: 0;
height: 318px;
width: 100%;
overflow: hidden;
position: static;
}
.footerBackgroundImage {
/* The image used */
background-image: url("../Images/FooterImage.png");
min-height: 318px;
/* Center the image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* Needed to position the navbar */
position: relative;
}
#footerImages {
height: 100px;
width: 100px;
padding-bottom: 10px;
position: sticky;
bottom: 0;
}
.footerLinks a {
color: #f2f2f2;
font-size: 20px;
padding-right: 10px;
text-decoration: underline;
font-weight: bold;
}
.footerLinks a:hover {
text-decoration: none;
}
.test {
bottom: 0px;
}<body><div class="headerBackgroundImage"><img src="../Images/logo.png" id="logo"><div class="container1"><div class="topnav"><a href="">Attractions</a><a href="">Restaurants</a></div></div><div class="container2"><div class="topnav"><a href="">Hotels</a><a href="">Transport</a></div></div></div><div class="ImageColumn"><img src="../Images/indexImage1.png" id="ImageColumnImages"><img src="../Images/indexImage2.png" id="ImageColumnImages"><img src="../Images/indexImage3.png" id="ImageColumnImages"><img src="../Images/indexImage4.png" id="ImageColumnImages"></div><footer><div class="test"><div class="footerBackgroundImage"><img src="../Images/facebook.png" id="footerImages"><img src="../Images/instagram.png" id="footerImages"><img src="../Images/twitter.png" id="footerImages"><div class="footerLinks"><a href="">Contact Us</a><a href="">Refrences</a></div></div></div></footer></body>