problems with children escaping parent divs using ems and % - html

Question

I've been working on a site that I've been using ems and % in as I want to make it responsive. It's my first time attempting this.
I had the same site working using px.
I'm having this issue where content in the header and footer is not re-sizing properly. The content moves down past their containers or overlaps other content.
I.e. say in my footer i have the parent content set to 100% width and then the children divs set to various percentages of it.
The children then move down out of their containers and even the footer itself when I re-size.
Here's My JsFiddle
In my code here I've just put the footer code as it will just look messy if I put it all
<footer class="site-footer">
<div class="leftfoot">
<div class="footercontent">
<div class="logocopyright">
Tali.Zorah 2015 ©
</div>
</div>
</div>
<div class="rightfoot">
<div class="legal">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>LEGAL NOTICE</li>
<li>PRIVACY POLICY</li>
</ul>
</div>
<div class="social">
<ul class="socicons">
<li>
<a class="facebook" href="https://www.facebook.com"> <img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="twitter" href="https://www.twitter.com"><img src="http://placehold.it/350x150"></a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com"><img src="http://placehold.it/350x150"></a>
</li>
</ul>
</div>
</div>
</footer>
And the footer CSS:
.footercontent{
position:absolute;
min-width:100%;
max-width:100%;
}
.logofooter{
float:left;
margin-left:2%;
min-width: 10%;
max-width: 10%;
min-height:100%;
}
.mysitefooter-logo {
min-height: 100%;
min-width:10%;
max-width:100%;
margin-top: -1%;
margin-right:1%;
}
.logocopyright{
float:left;
margin-top:5%;
margin-left:2%;
min-width:100%;
padding-top:1%;
}
.leftfooter{
min-width:10%;
max-width:15%;
float:left;
}
.rightfooter{
min-width:85%;
max-width:90%;
float:right;
}
.logocopyright a {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size:.6em;
}
.logocopyright a:hover{
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal{
background-color:#009;
min-width:70%;
max-width:80%;
float:left;
}
.legal a:hover {
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal ul li {
display:inline-block;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size:.8em;
margin-left:8%;
min-width:10%;
max-width:100%;
}
.legal ul > :first-child {
margin-left:5%;
}
.legal a {
font-size:1em;
color:#FFF;
}
.social{
min-width:15%;
max-width:20%;
float:right;
margin-top: -4%;
color:#000000;
}
.social li {
display:inline-block;
}
.socicons{
min-width:80%;
max-width:100%;
}
.socicons li{
display:inline;
}
.facebook{
min-width:8%;
max-width:10%;
}
.facebook img
{
min-width:8%;
max-width:20%;
}
.twitter{
min-width:8%;
max-width:10%;
}
.twitter img
{
min-width:8%;
max-width:20%;
}
.instagram{
min-width:8%;
max-width:10%;
}
.instagram img
{
min-width:8%;
max-width:20%;
}

Answer 1

If you want a responsive site absolute positioning is not a good idea. Just use a width of 100% and try using viewport(vw) width instead of ems.

Answer 2

maybe I fixed a little. I updated:
'id' into footer tag.
little jscript.
here's my js code:
var footer = document.getElementById("guestAttempt");
footer.setAttribute("float","left");
footer.setAttribute("margin-left","3em");
footer.setAttribute("margin-bottom","0em");
https://jsfiddle.net/unt5zbL8/6/embedded/result/