How do I get my footer to float left and right? - html

Question

I want the text to be on the right side of my footer and the images to be on the left. Every time I had the float: right to the "footer li.pictures" the background colour disappears.
Before adding float: right:
http://i57.tinypic.com/2cp9mkj.png
After adding float: right:
http://i60.tinypic.com/206y1rr.png
html:
<div class="events">
<div class="row">
<div class="col span-12">
<footer>
<ul class="links">
<li class="links">Home</li>
<li class="links">Vendors</li>
<li class="links">Events</li>
<li class="links">Location</li>
<li class="links">Volunteer</li>
</ul>
<ul class="pictures">
<li class="pictures">
<a href="#">
<img src="images/insta.png" alt="instagram icon">
</a>
</li>
<li class="pictures">
<a href="#">
<img src="images/twit.png" alt="twitter icon">
</a>
</li>
<li class="pictures">
<a href="#">
<img src="images/face.png" alt="facebook icon">
</a>
</li>
</ul>
</footer>
</div>
</div>
</div>
css:
.row {
margin: 0 auto;
clear: both;
}
.col {
box-sizing: border-box;
float: left;
width: 100%;
margin: 0;
}
body {
margin: 0px 0;
}
footer {
background-color:#343434;
width: 100%;
margin-top: 20px;
height: auto;
font-family: 'billymedium';
font-size: 23px;
line-height: 23px;
}
footer a, a:visited {
color: #b7b7b7;
text-decoration: none;
}
footer a:hover {
color: #5a8747;
}
footer img {
max-width: 30px;
padding-top: 10px;
padding-bottom: 5px;
}
footer ul.links, ul.pictures {
list-style: none;
margin-top: 0;
padding: 0;
}
footer li:first-child {
display: inline;
margin-left: 0px;
}
footer li.links {
display: inline;
margin-left: 25px;
float: left;
padding-top: 15px;
}
footer li.pictures {
display: inline;
margin-right: 5px;
text-align: right;
}

Answer 1

Adding this CSS to your stylesheet should solve the problem:
footer {
overflow: hidden;
}

Answer 2

This is a clearing issue. You might have a .clearfix or .clear class made if this site is using a framework but basically it looks like this:
.clear {
clear: both;
}
Add this inside of the "col span-12" div right before it ends:
<div class="clear"></div>
If you don't want to create a class, this also works:
<div style="clear:both;"></div>