No more content will display below DIV - html

Question

I'm trying to add the a footer image below these two messages. The bottom one is transparent and anything that I add below "message 2" goes behind instead of below it, How do I keep editing below these?
In theory adding even just some text like
<p>hello</p>
should appear below. It shows behind the message 2 div and doesn't allow me to actually edit below, it edits behind. How would I go about fixing this?
<style>
body {
display: flex;
height: 100vh;
margin: 0;
flex-direction: column;
}
.message1 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #f0f0f0;
}
.message2 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #3a3a3a;
}
a {
text-decoration: none;
color: ##6d1a76;
}
</style>
<style>
.messagetext {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 20px;
padding: 0px;
</style>
<div class="message1">
<div class="messagetext">
<p class="Roboto">URL TEXT</p>
</div>
</div>
<div class="message2">
<div class="messagetext">
<font size="3" color="#ffffff">
<p class="Roboto">TEXT</p>
</font>
</div>
<div>
<br>
<style>
.footer {
position: fixed;
bottom: 0%;
width: 100%;
}
</style>
<!--Footer-->
<div class="footer" src="FOOTER IMAGE" width="80%" alt="Footer"> </div>
<br>
If you try adding text below it just shows next to the existing text, I need it to show below.

Answer 1

Your footer has position: fixed and bottom: 0%;, so it is at the bottom of the page (I gave it a height and made its background yellow to make it visible, BTW an src attribute in the footer DIV won't produce an image).
The position: fixed also takes it out of the rest of the document flow, so whatever come * after* the footer will simply follow whatever is before the footer.
Additionally, you had a few minor mistakes/typos in your code - unclosed tags both in HTML and CSS rules. I split it in CSS and HTML to make it clearer in my snippet below
body {
display: flex;
height: 100vh;
margin: 0;
flex-direction: column;
}
.message1 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #f0f0f0;
}
.message2 {
flex: 1;
align-items: center;
display: flex;
max-height: 100px;
background-color: #3a3a3a;
}
a {
text-decoration: none;
color: #6d1a76;
}
.messagetext {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 20px;
padding: 0px;
}
.footer {
position: fixed;
bottom: 0%;
width: 100%;
height: 100px;
background: #ffffaa;
}
<div class="message1">
<div class="messagetext">
<p class="Roboto">URL TEXT</p>
</div>
</div>
<div class="message2">
<div class="messagetext">
<font size="3" color="#ffffff">
<p class="Roboto">TEXT</p>
</font>
</div>
<!--Footer-->
<div class="footer" src="FOOTER IMAGE" width="80%" alt="Footer"> </div>
<p>THIS IS BELOW THE FOOTER IN THE HTML CODE, but above it in the document flow</p>