I'm currently working on a styled footer with three columns and links inside them. Everything works fine beside the copyright line which I'd like to put underneath the three columns. Problem: it sticks next to the third column and doesn't move down. I tried to do this with some nbsp; and p and br tag hacks. This works fine on desktop but looks bad on mobile devices. I want this responsive. Do you guys know how to put the copyright line aligned left underneath the three columns responsively? Thanks for any help.
This is what I got so far. (here's a fiddle as well: https://jsfiddle.net/hLLfrcwo/)
<style type="text/css" media="screen">
footer{
height: auto;
padding:1px 15px;
width:auto;
}
#footer_info_tab{
float:left;
width:auto;
padding:10px;
}
#footer_resources_tab{
width:auto;;
float:left;
text-align:justify;
padding:10px;
}
#footer_recommend_tab{
float: left;
width:auto;
text-align: justify;
padding:10px;
}
</style>
<footer>
<div id="footer_info_tab"><b>Info</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
<div id="footer_resources_tab"><b>Resources</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
<div id="footer_recommend_tab"><b>We Recommend</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
<p><br> <p><br> <p><br> <br>Ⓒ 2011-2017 Company. All rights reserved.
</footer>
You should use clear: left; for copyright paragraph to go below left aligned elements.