The overlap is caused by this element that you have applied a height that is too small:
[B] height: 326px;[/B]
You have said it is 326px high bit it's more like 400px high so any excess will cause an overlap.
Your sticky footer is completely broken though because you have a missing closing div for page wrapper and therefore the footer is inside pagewrapper and not sticky at all. In the other page you have both the missing closing div for #pagewrapper and for #content so validate your page and fix the missing tags.
As you don't seem to understand how a sticky footer works you would be better off removing the code for it and just using a normal footer as you seem not to have noticed the difference anyway The method you are using is a flawed concept anyway so if you do need a sticky footer then spend some time studying the link Ralph gave and then when you are comfortable with how it works you will be able to implement it more efficiently.
Also never do this:
<span class="mini_heading">Web page</span>
<p>You can view your own web page from any web- based computer. You have
the capability on your site to view numerous devices. All of the products
operate on the same platform allowing for the mixing of our products. </p>
Use html efficiently and if a heading is a heading then use a heading tag of suitable level.
Don't use breaks to make line spaces either. Most pages contain very few breaks at all unless for separating form elements, addresses, poems and the like. For text a paragraph has a logical conclusion and should end with a closing p tag and then start another p element. Never use breaks just to make space.
Hope that's of some help