You have encountered collapsing margins.
When elements have top or bottom margin, and the parent element doesn't have a border or padding, the margins collapes. The effect is that the margin is visible outside the parent element, not between the parent element boundaries and the child element.
It's the margin of the p element in the footer that is collapsing. It creates the distance between the content1 and the footer element.
By removing the margin on the p element, you get rid of the distance:
.footer p { margin: 0;}Demo:
.footer p { margin: 0;}body{ margin: 0;}.footer{ position: relative; width: 100%; min-width: 512px; height: 150px; background-color: black; font-size: 12px; font-family: arial; color: gray; z-index: 5;}.content1{ position: relative; width: 100%; height: 300px; background-color: #E6E6E6; z-index: 5;}.imagecontainer{ height: 80%; float: right;}.image{ position: relative; display: block; height: 100%;}<div class="content1"><!--<div class="textcontainer"><p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p></div>--><div class="imagecontainer"><img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img></div></div><div class="footer"><center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center></div>