After creating a footer that sticks to the bottom of my webpage, I noticed that it lines up right after the last image with no spacing in between. To add some space between the final image and the footer, I considered using a percentage-based margin. However, setting a margin-bottom:180% felt like a messy solution that could cause issues when resizing the window. Here is a simplified version of my code:
<body>
<div id='wrapper'>
<section class='gallery-set'>
<div class='wrap'>
<img class='tilesetsmall' src ='images/sample.jpg'/>
<div class='ontop'><p class='example-text'>Overlay Test text </p></div>
</div>
</section>
</div>
<div id="footer">
</div>
</body>
My aim now is to introduce some spacing between the footer and the rest of the content.