Footer not in the correct place-CodePudding

Somehow, my HTML and CSS won't work properly. My main doubt is in the span. Because it's all working on any other pages.

The footer is not detecting any object, so it is staying at the most top of the page. (I've also tried putting the footer on the <footer> tag and it still shows the same result.)

The situation is illustrated in the picture that is attached.

Here is my code snippet:

.aboutuspagetitle {
  width: 100%;
  color: rgba(159,74,74,1);
  position: absolute;
  top: 176px;
  left: 660px;
  font-family: Merriweather Sans;
  font-weight: Bold;
  font-size: 40px;
  opacity: 1; 
}
.aboutuspagedesc {
  width: 100%;
  color: rgba(0,0,0,1);
  position: absolute;
  top: 313px;
  left: 30px;
  font-family: Merriweather Sans;
  font-weight: normal;
  font-size: 33px;
  opacity: 1;
  text-align: left;
}
.footer {
  clear: both;
  position: absolute;
  height: 75px;
  background-color: #121212;
  font-family: Karla Tamil Upright;
  color: white;
  text-align: center;
  left: 0px;
  width: 300%;
}
.foot1{
  width: 304px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 0px;
  left: 568px;
  font-family: Karla Tamil Upright;
  font-weight: normal;
  font-size: 18px;
  opacity: 1;
  text-align: center;
}
.foot2{
  width: 304px;
  color: rgba(255,255,255,1);
  position: absolute;
  top: 45px;
  left: 568px;
  font-size: 14px;
  opacity: 1;
  text-align: center;
}

<body>
  <span class="aboutuspagetitle">ABOUT US</span>
  <span class="aboutuspagedesc">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
  </span>
  <div class="footer">
    <p class="foot1">THIS IS AN ADDRESS</p>
    <a href="https://www.google.com"><span class="foot2">© 2021</span></a>
  </div> 
</body>

CodePudding user response：

You just forgot to add bottom: 0; to the footer style. And position it using position: fixed; so it will stay at the bottom even when you scroll.

.aboutuspagetitle {
  color: rgba(159,74,74,1);
  font-family: Merriweather Sans;
  font-weight: Bold;
  font-size: 40px;
  text-align: center;
}
.aboutuspagedesc {
  width: 100%;
  color: rgba(0,0,0,1);
  font-family: Merriweather Sans;
  font-weight: normal;
  font-size: 33px;
  text-align: left;
  padding-bottom: 75px;
}
.footer {
  display: flex;
  position: fixed;
  height: 75px;
  background-color: #121212;
  font-family: Karla Tamil Upright;
  font-weight: normal;
  color: white;
  text-align: center;
  left: 0px;
  bottom:0;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.foot1{
  color: rgba(255,255,255,1);
  font-size: 18px;
  margin: 0;
}
.foot2{
  color: rgba(255,255,255,1);
  font-size: 14px;
}

<body>
  <h1 class="aboutuspagetitle">ABOUT US</h1>
  <span class="aboutuspagedesc">
    <p>Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nisl ut justo tincidunt, ac laoreet nunc elementum.</p>
  </span>
  <footer class="footer">
    <p class="foot1">THIS IS AN ADDRESS</p>
    <a href="https://www.google.com"><span class="foot2">© 2021</span></a>
  </footer> 
</body>

Here are some advices.
First, as said in the comments, don't use position absolute on everything !! As the moment you'll try a different screen size, everything will be offest.
Second, try not to add too many style that won't do anything at all at the end. If you try something and it doesn't work, remove it from the style !