Whenever I resize the browser window, the content in the footer starts stacking on top of each other. However, there comes a point during resizing when things start to look messy. As someone new to this, I am wondering if there might be a better approach to handling this issue. Thank you! You can view the problem by checking out the jsFiddle file here: http://jsfiddle.net/robontrix/h21fyywn/#&togetherjs=cjr35cIPDP
HTML Footer
<footer>
<div id="footer-right">
<ul>
<li>ABOUT US</li>
<li><a href="">Contact Us</a></li>
<li><a href="">FAQ's</a></li>
<li><a href="">Site Map</a></li>
</ul>
<ul>
<li>SUPPORT OUR CAUSE</li>
<li><a href="">Donate</a></li>
<li><a href="">Volunteer</a></li>
<li><a href="">Fundraising Events</a></li>
</ul>
<ul>
<li>FOLLOW US</li>
<li>
<a href="#Facebook"><img src="img/facebook-icon.png" alt="Facebook Logo" class="social-icon"></a>
<a href="#Instagram"><img src="img/instagram-icon.png" alt="Instagram Logo" class="social-icon"></a>
<a href="#Twitter"><img src="img/twitter-icon.png" alt="Twitter Logo" class="social-icon"/></a>
<a href="#Pinterest"><img src="img/pinterest-icon.png" alt="Pinterest Logo" class="social-icon"/></a>
</li>
</ul>
</div>
<div id="footer-left">
<p id="footer-slogan">BREAK THE <strong>SILENCE</strong> <br>AND <strong>CYCLE</strong> OF ABUSE</p>
<p id="copyright">Copyright© 2014 International Child Advocacy Network</p>
</div>
</footer>
CSS Footer
/**********************
FOOTER
**********************/
footer {
font-family: 'Open Sans', sans-serif;
max-width:950px;
background-color:#434a54;
font-size:0.75em;
clear:both;
color:#e6e9ed; overflow:auto;
margin: 0 auto;
padding:5px;
}
footer h3{
padding-left: .9em;
font-family: 'Open Sans', sans-serif;
}
footer ul {
display:inline-block;
list-style-type: none;
}
footer ul li{
list-style:none;
text-decoration:none;
margin-left: 1em;
}
footer ul li a{
color:#e6e9ed;
text-decoration:none;
}
footer a:hover {
color:#FFFFFF; /*Change hover color to make it more prominent*/
}
/**********************
RIGHT SIDE OF FOOTER - Contains links and social media icons
**********************/
#footer-right {
float:right;
margin-right:15px;
}
#footer-right li:nth-child(1) { /*Styles footer headers*/
font-weight:bold;
font-size:1.2em;
padding-bottom:4px;
}
.social-icon {
display:inline-block;
width:24px;
height:24px;
margin-bottom:22.7px; /*controls height of "follow us" in footer*/
padding:1px;
border-radius: 20%;
}
/**********************
LEFT SIDE OF FOOTER - Contains copyright and slogan
**********************/
#footer-left {
float:left;
padding-left: 2em;
text-align:left;
font-size: 1.35em;
display:inline-block;
line-height: 1.5em;
}
#footer-slogan {
font-family: 'Georgia', 'Droid Serif', sans-serif;
}
#copyright{
font-size: .75em;
text-align:left;
margin-top: 5px;
display:inline-block;
font-family: 'Open Sans', sans-serif;
}