How to make footer not overlap and positioned properly? - html

Question

I have a footer at the bottom of my pages, a box ad at the top of that footer, and a form. These 3 elements are spaced out appealingly (only on my screen size) through position: absolute. Whenever I change my browser size, I've made it so that the footer stays away from my ad and doesn't overlap. My form never overlaps with my ad when resized and it is perfect for all screen sizes. On the other hand, my footer overlaps my ad on different screen sizes, and I don't want to spend time on all my pages adding media queries to fix this. If the screen size is small, the footer will either overlap or be way down at the bottom. Also, whenever a user opens a page with a screen width of greater than 500, the ad becomes a horizontal ad,leaving empty space and making the website unappealing at the bottom. This is an example of my css code:
#footer{
position: absolute;
left: 0px;
right: -2px;
bottom: -300px;
margin-bottom: -400px;
background-color: black;
width: 100%;
height: 200px;
}
Media query:
#media screen and (max-width: 1050px)
{
#footer{
margin-bottom: -500px;
}
}
I also have another footer (mobFooter) that comes out and hides the original footer. This footer is for mobile devices. I am doing the same thing with it, with media queries and it's not working out. How do I make it so that the footers are always at the bottom and have a certain amount of space between them and the ad? Also, if the ad becomes a horizontal ad (box to horizontal), how do I make the footer take up that unused space?
HTML code:
<div id="ad2">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- YC ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4549632347845332"
data-ad-slot="4159114047"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="footer">
<div id="mobFooter">
<p>Home</p>
<hr>
<p>Normal Submit</p>
<hr>
<p>Premium Submit</p>
<hr>
<p>Advertising | Contact us</p>
<hr>
<p>Terms | Privacy</p>
</div>
<div id="social">
<ul>
<li><img src="/submit/assets/facebook.png"/></li>
<li><img src="/submit/assets/twitter.png"/></li>
<li><img src="/submit/assets/youtube.png"/></li>
</ul>
</div>
<img src="/submit/assets/logo.png"/>
<ul>
<li>Home</li>
<li>Normal Questions</li>
<li>Premium Questions</li>
<li>Advertising</li>
</ul>
<div id="policies">
<ul>
<li>Terms of Use</li>
<li>Privacy</li>
<br>
<li id="net">Contact us</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/submit/validation.js"></script>
I've included the HTML code where my ad is and where my footer, and mobFooter is. Note: mobFooter is hidden until screen size reaches 500px.

Answer 1

<div id="ad2">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- YC ads -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-4549632347845332"
data-ad-slot="4159114047"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="footer">
<div id="mobFooter">
<p>Home</p>
<hr>
<p>Normal Submit</p>
<hr>
<p>Premium Submit</p>
<hr>
<p>Advertising | Contact us</p>
<hr>
<p>Terms | Privacy</p>
</div>
<div id="social">
<ul>
<li><img src="/submit/assets/facebook.png"/></li>
<li><img src="/submit/assets/twitter.png"/></li>
<li><img src="/submit/assets/youtube.png"/></li>
</ul>
</div>
<img src="/submit/assets/logo.png"/>
<ul>
<li>Home</li>
<li>Normal Questions</li>
<li>Premium Questions</li>
<li>Advertising</li>
</ul>
<div id="policies">
<ul>
<li>Terms of Use</li>
<li>Privacy</li>
<br>
<li id="net">Contact us</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/submit/validation.js"></script>
$(document).ready(function(){
var footerHeight=$("#footer").height();
$("body").css("padding-bottom",footerHeight);
});
$(window).resize(function(){
var footerHeight=$("#footer").height();
$("body").css("padding-bottom",footerHeight);
});
body{position: relative;}
#footer{
position: absolute;
left: 0px;
right: -2px;
bottom: 0;
background-color: black;
width: 100%;
}
Refer Fiddle
Just used the jquery to identify the height of the footer and used padding-bottom for the body