title: Change multiple divs layout from vertical to horizontal
body: <p>I am trying to create a footer where there is text to the left, center and right. So far I have done this but the issue is the divs in center are stacking up vertically rather than horizontally. I have tried applying float:left to the .entypo elements which works, but it moves all of them next to .footerslinks-left, instead of staying in the center.</p>
  
  <p><a href="http://jsfiddle.net/8uL2e4bw/" rel="nofollow">http://jsfiddle.net/8uL2e4bw/</a></p>
  
  <p>So the HTML is as followed:</p>
  
  <pre><code>&lt;footer&gt; 
  
  
  &lt;div class="topfooter"&gt;
  
  &lt;ul class="footerlinks-left"&gt;
  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  
  &lt;div class="footeraddress-right"&gt;
  
  &lt;p&gt;Address&lt;/p&gt;
  &lt;p&gt;11 Name Road&lt;/p&gt;
  &lt;p&gt;TE5 7IN&lt;/p&gt;
  &lt;p&gt;City&lt;/p&gt;
  &lt;p&gt;Postcode&lt;/p&gt; 
  
  &lt;div class="entypo-phone"&gt;01234567890&lt;/div&gt;
  &lt;div class="entypo-mail"&gt;hello@salon.com&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="footersocial-center"&gt;
  &lt;div class="entypo-facebook-circled"&gt; &lt;/div&gt;
  &lt;div class="entypo-twitter-circled"&gt; &lt;/div&gt;
  &lt;div class="entypo-gplus-circled"&gt; &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;/footer&gt;
  </code></pre>
  
  <p>Yes I am aware the code is not the tidiest, I should probably address this first to avoid unnecessary complications!</p>
  
  <p>CSS:</p>
  
  <pre><code>footer {
  
  text-align: left;
  padding: 10px;
  background-color: black;
  color: #da82da;
  }
  
  .topfooter {
  
  margin: 10px auto;
  max-width: 720px;
  
  }
  
  
  .footerlinks-left, .footerlinks-left a {
  
  float: left;
  
  color: #da82da;
  list-style: none;
  text-decoration: none;
  margin-left: 20px;
  
  }
  
  .footersocial-center {
  
  
  font-family: 'entypo';
  font-size: 30px;
  overflow:hidden;
  text-align:center;
  
  }
  
  
  
  .footeraddress-right {
  
   float: right;
  
  }
  
  .footeraddress-right p {
  margin: 0;
  padding: 2px;
  }
  
  
  .entypo-phone, .entypo-mail {
  
    font-family: 'entypo', sans-serif;
  padding: 2px;
  }
  </code></pre>