In code footer goes all over the place - html

Question

I have some troubles with my footer on a website. Footer is not displaying at the bottom of the page but it starts right below the header and covers elements that are under it. For better understanding I made fiddle for it and screenshot
But its like this:
<div class="mens">
<div class="main">
<div class="wrap">
<div class="section group">
<div class="cont span_2_of_3">
<h2 class="head">PRIPOROČAMO</h2>
<div class="top-box">
and then there are some products and then there are the end divs for this:
</div>
</div>
</div>
</div>
</div>
</div>
And then follows the footer:
<footer class="footer-2 bg-midnight-blue">
<div class="container">
<nav class="pull-left">
<ul>
<li class="active">
Home
</li>
<li>
Company
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="social-btns pull-right">
<div class="fui-vimeo"></div><div class="fui-vimeo"></div>
<div class="fui-facebook"></div><div class="fui-facebook"></div>
<div class="fui-twitter"></div><div class="fui-twitter"></div>
</div>
<div class="additional-links">
Be sure to take a look to our Terms of Use and Privacy Policy
</div>
</div>
</footer>
And I know its a lot of code but I would really appreciate if someone could look at it. Thanks.

Answer 1

use this to reset ur css
.clearfix:before,.clearfix:after{content: '.';display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;width: 0;height: 0;clear: both;}
.clearfix {overflow: auto;zoom: 1;}
and add clearfix class in parent div where in child u have used float like in
<div class="page-wrapper clearfix">
<div class="main clearfix">
<footer class="footer-2 bg-midnight-blue clearfix">