Prevent Footer From Covering Content - html

Question

I currently have a landing page with two columns in a row, but when I scroll my photo in the right column does not stay fully visible. The footer is sticky. Does anyone have any advice? I added a paragraph that I left out the original code, that I want wrapped around the (larger) photo in the left column, while the last three photos float right and fall under each other.
html {
height: 100%;
background-size: cover;
}
body {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
}
.column {
float: left;
padding: 5px;
height: 1000px;
}
.left {
width: 65%;
}
.right {
width: 30%;
height: 1000px;
}
footer {
width: 100%;
background-color: rgb(106, 35, 35);
padding: 60px 0px;
margin-top: auto;
bottom: 0;
position: fixed;
}
footer nav {
float: left;
}
footer nav ul {
list-style-type: none;
padding: 0;
overflow: hidden;
}
footer nav li {
float: left;
color: white;
}
footer nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<div class="column right">
<img id="" class="img2" src="https://via.placeholder.com/450" width="450px" length="450px" /><br>
<p class="paragraph">Author: Hege Refsnes //Today she graduated and we got ta respect that feel me? Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus. Today she graduated and we got ta respect that feel me? Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec e
Today she graduated and we got ta respect that feel me? Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec e
</p>
</div>
<img id="" class="img2" src="https://via.placeholder.com/450" width="450px" length="450px" /><br>
<img id="" class="img2" src="https://via.placeholder.com/450" width="450px" length="450px" /><br><br><br>
</div>
<section>
<footer>
<div class="wrapper">
<nav>
<ul>
<li> <a class="active" href="index.html">Home</a></li>
<li> Candy</li>
<li> Cakes</li>
<li> Chips</li>
<li> Merch</li>
</ul>
</nav>
</div>
</footer>
</section>

Answer 1

with a sticky footer, i do prefer adding a margin (any px upto 50px) before i call the footer. This ensures that anytime am scrolling to bottom, there is an empty space that will always be left
see example in screenshot
enter image description here

Answer 2

u set the position of the footer fixed in css and it is in line 75 of css
just remove position:fixed
form the footer