Get pictures to display correctly next to each other

Question

I am fairly new to web development and have been working on some social buttons in the footer of my page. I have managed to make them have a hover effect and such that I want, they are now just not display next to each other in the correct locations. I would like them to be next to each other, I know this is done with divs and wrapping somehow, just not sure how to implement it into my code. here is my code:

<style>
  .facebook {
    width: 64px;
    height: 64px;
    float: left;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -500px;
  }
  .facebook:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
  }
  li {
    list-style: none;
  }
</style>

<ul>
  <li>
    <a href="https://www.facebook.com/pages/Payneham-City-Concert-Band/1383434338547917?fref=ts" target="FB Page">
      <div class="facebook">Facebook

      </div>
    </a>
  </li>
</ul>

<style>
  .twitter {
    width: 64px;
    height: 64px;
    float: right;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -250px;
  }
  .twitter:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
  }
  li {
    list-style: none;
  }
</style>



<ul>
  <li>
    <a href="https://twitter.com/PaynehamBand" target="Twitter Page">
      <div class="twitter">
      </div>
    </a>
  </li>
</ul>

As you can see, the code works, but the images are at opposite ends of the page, I need them to display next to each other on the left. Any help is much appreciated.

Answer 1

You floated your twitter icon to the right. just change that to float: left;

<style>
  .facebook {
    width: 64px;
    height: 64px;
    float: left;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -500px;
  }
  .facebook:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/facebook-hover.png');
  }
  li {
    list-style: none;
  }
</style>

<ul>
  <li>
    <a href="https://www.facebook.com/pages/Payneham-City-Concert-Band/1383434338547917?fref=ts" target="FB Page">
      <div class="facebook">Facebook

      </div>
    </a>
  </li>
</ul>

<style>
  .twitter {
    width: 64px;
    height: 64px;
    float: left;
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-5-512.png');
    background-repeat: no-repeat;
    background-size: 64px 64px;
    text-indent: -250px;
  }
  .twitter:hover {
    background-image: url('http://pccb.org.au/wp-content/uploads/2014/12/twitter-hover.png');
  }
  li {
    list-style: none;
  }
</style>



<ul>
  <li>
    <a href="https://twitter.com/PaynehamBand" target="Twitter Page">
      <div class="twitter">
      </div>
    </a>
  </li>
</ul>