How to Put Footer at Bottom of Page

My footer was at the bottom of the page, until I added a few more divs before it. I am not sure why this threw my code. I do not want to use position: fixed because I want it to be at the bottom, but to be seen only when scrolled down to, like the footer on this page.

            .gallerybox {
                border: 4px solid rgba(54, 215, 183, 1);
                width:30%;
                height:200px;
                float:left;
                margin-left:10px;
                margin-bottom:10px;
            }
            #footer {
                width:100%;
                height:100px;
                background-color:lightgray;
                bottom:0;
                left:0;
                position:relative;
            }

    <div id="holder">
        <div id="body">
            <p id="gallery">The Gallery</p>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <br>
    <div id="footer">FOOTER</div>
        </div>
         </div>

Solution

Please never use float property to position multiple div.

Use display: flex to achieve the same in the best way possible.

I think this is what you want

.container{
  display:flex;
  flex-direction:column;
}
.gallery{
  display:flex;
  flex-wrap:wrap;
}
.gallerybox {
  border: 4px solid rgba(54, 215, 183, 1);
  width:30%;
  height:200px;
  margin-left:10px;
  margin-bottom:10px;
}
#footer {
  width:100%;
  height:100px;
  background-color:lightgray;
}

<div id="holder">
  <p>The Gallery</p>
        <div class="container">
          <div class="gallery">
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
            <div class="gallerybox"></div>
          </div> 
          <div id="footer">FOOTER</div>
        </div>
</div>

I have included the display: flex property and removed the float: left which was creating the issue also added some subtle changes to the HTML structure.

I recommend you Learning about flexbox it will make positioning and structuring HTML with CSS so much easy and understandable.

Do tell me whether I was of any Help :)