how to position footer with contents that has float properties

one of our project is to create this basic website that has a homepage, Login-page, admin-page.

I have made the basic outline, I just cant properly fix the positionings of the divs. All pages must have a header and footer and should be consistent to all pages.

On my admin-page, I have the header properly positioned. the content is 6 pictures in 3x2 grid which I have done using float lefs to arrange them. but my footer cant position itself at the verybottom of the page even tho it has the bottom: 0px; I cant seem to make it work.

how do I fix this?

PS. This is my first time asking in this website, I dont know how to show my code so you all can see what I did.

.foot {
  width: 100%;
  height: 150px;
  background-image: url(images/maoheader.jpg);
  background-size: contain;
  position: absolute;
  bottom: 0;
}

.sepfoot {
  width: 100%;
  height: 150px;
  background-image: url(images/divider.png);
  background-size: contain;
  position: relative;
  bottom: 74px;
  z-index: 1;
}

.foot1 {
  padding: 15px;
}

.stud {
  width: 550px;
  height: 350px;
  border: rgb(70, 24, 49) solid 3px;
}

.sFrame {
  width: 550px;
  height: 350px;
  margin: 40px;
  position: relative;
  float: left;
}

<!-- this is div dor header-->
<div>
  <div class="header">
    <!-- <button type"button" style="position:absolute; right:20px; 
    top:10px;" class="but"><a href="Index.html">Home Page</a></button> -->
    <h1 class="stroke">KIA ORA AOTEAROA</h1>
    <p class="phead">LIBRARY NAME</p>
  </div>
</div>

<div class="sep"></div>

<!-- this is div for page content -->
<div class="test">

  <div class="nav">A-Z</div>
  <div class="nav">FICTION</div>
  <div class="nav">NON-FICTION</div>
  <div class="nav">AUTHOR</div>

  <div>
    <div class="sFrame"><img src="images/s1.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s2.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s3.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s4.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s5.jpg" class="stud"></div>
    <div class="sFrame"><img src="images/s6.jpg" class="stud"></div>
  </div>

  <!-- this is footer -->
  <div class="foot">
    <div class="sepfoot"></div>
    <p class="foot1">Created by: Pete Castolome<br> s00019257
      <br> +64 021 23456789<br>
      <email>[email protected]</email>
    </p>
  </div>
  
</div>

Solution

From comments above...

I would suggest you use position sparingly and only when you need to overlap things, and only use float when you want text to "wrap" around an image in content. Explore display: flex; for layout like columns.

Example:

Remove all your positioning, stick with source order for now. As the page content gets longer the footer will exist at the bottom of the content.

For the page content:

HTML

<div class="flex-parent">
     <div class="flex-child sFrame"><img src="images/s1.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s2.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s3.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s4.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s5.jpg" class="stud"></div>
     <div class="flex-child sFrame"><img src="images/s6.jpg" class="stud"></div>
</div>

CSS

.flex-parent {
    diplay: flex;
    flex-wrap: wrap;
}

.flex-child {
    width: calc(100% / 3);
}