0

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>
Alessio Cantarella
  • 4,659
  • 3
  • 21
  • 29
TESTING
  • 43
  • 6
  • Possible duplicate: https://stackoverflow.com/questions/585945/how-to-align-content-of-a-div-to-the-bottom – isherwood Jan 07 '20 at 16:34

2 Answers2

0

Using display: flex on the footer makes this work. By aligning the content with flex-end it positions itself on the bottom of the page.

Learning grids and flex boxes really makes life easier.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

footer {
  /*Added display flex and align-items*/
  display: flex;
  align-items: flex-end;
  height: 318px;
  width: 100%;
  overflow: hidden;
  position: static;
}

.test {
  /*Set the div test to 100%*/
  width: 100%;
}

.footerBackgroundImage {
  ...
  /*added background color for testing purposes */
  background-color: #e3e3e3;

}


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 {
  display: flex;
  height: 318px;
  width: 100%;
  overflow: hidden;
  position: static;
  align-items: flex-end;
  
}

.test {
  width: 100%;
}

.footerBackgroundImage {
  /* The image used */
  background-image: url("../Images/FooterImage.png");
  /* Center the image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Needed to position the navbar */
  background-color: #e3e3e3;
  width: 100%;
}

.footerImages {
  height: 100px;
  width: 100px;
  padding-bottom: 10px;
}

.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" class="footerImages">
        <img src="../Images/instagram.png" class="footerImages">
        <img src="../Images/twitter.png" class="footerImages">

        <div class="footerLinks">
          <a href="">Contact Us</a>
          <a href="">Refrences</a>
        </div>
      </div>
    </div>
  </footer>

</body>
Mouser
  • 12,807
  • 3
  • 25
  • 51
-1

Set the footer to have margin: 100%;. That should put it to the bottom.

Jeffrey Lan
  • 88
  • 12