How do i create a three column responsive footer - css

Question

i need assistance trying to build a three column footer in a website with wordpress. I cant seems to get the positioning of the columns right no matter how hard i try. I actually created a child theme to override the original footer that came with the theme. Can somebody help look at my code and kindly profer solutions please
<footer>
<div id="footerwrap">
<div id="menu-footer">
<h3>Links</h3>
<ul>
<li>Our Curriculum</li>
<li>Why Choose us</li>
<li>Apply Online</li>
<li>News</li>
<li>Events/Calendar</li>
</ul>
</div>
<div id="social-footer">
<h3>Links</h3>
<ul>
<li>Our Curriculum</li>
<li>admission procedure</li>
<li>apply online</li>
<li>news</li>
<li>upcoming events</li>
</ul>
</div>
<div id="copyright-footer">
Copyright &copy <?php echo date('Y'); ?> vidniel Tech
</div>
<div class="clear"></div>
</div>
</footer>
THE CSS
#footerwrap{
width: 100%;
position:relative;
}
#menu-footer{
width:30%;
float:left;
display:inline-block;
margin:0 20px 0 0;
}
.clear {clear:both}
#social-footer{
width:30%;
float: right;
display:block;
margin:0 20px 0 0;
}
#copyright-footer{
width:30%;
float:right;
display:inline;
margin:0 20px 0 0;
}
Banky

Answer 1

Not sure what exactly you're trying to accomplish, but you should be able to overwrite all of your CSS with the below:
#footerwrap{
width: 100%;
position:relative;
}
#menu-footer, #social-footer, #copyright-footer{
width:30%;
margin:0 20px 0 0;
display:inline-block;
vertical-align:top;
}
#media (max-width: 750px){
#menu-footer, #social-footer, #copyright-footer{
width:100%;
margin:0;
}
}
This includes a media query for smaller screens to stack your footer below 750px.