No More Content Will Display Below Div

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 kee

Solution 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;
}

<divclass="message1"><divclass="messagetext"><pclass="Roboto"><ahref="URL">URL TEXT</a></p></div></div><divclass="message2"><divclass="messagetext"><fontsize="3"color="#ffffff"><pclass="Roboto">TEXT</p></font></div><!--Footer--><divclass="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>