title: CSS layout - center & align two divs side by side
body: <p>I tried to center &amp; align 2 social buttons side by side within the  tag</p>
  
  <p><em>text-align: center</em> doesn't work for the buttons nor does <em>float: left</em> or <em>float: right</em></p>
  
  <p>jsfiddle link <a href="http://jsfiddle.net/htajL17y/" rel="nofollow noreferrer">http://jsfiddle.net/htajL17y/</a></p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!-- footer area --&gt;    
  &lt;footer&gt;
      &lt;div id="colophon" class="wrapper clearfix"&gt;
          COPYRIGHT 2014
          &lt;br&gt;
          Medialock Inc.
      &lt;/div&gt;
  
      &lt;div class="social-fb"&gt;
          &lt;img src="http://i.imgur.com/c6h4Mw6.png"/ &gt;
          &lt;h3&gt;
              facebook.com/medialock
          &lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="social-tw"&gt;
          &lt;img src="http://i.imgur.com/pHQnY64.png"/ &gt;
          &lt;h3&gt;
              twitter.com/medialock
          &lt;/h3&gt;
      &lt;/div&gt;
  
  &lt;/footer&gt;&lt;!-- #end footer --&gt; 
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>/*FOOTER*/
  footer{  
      background: #333;
      color: #ccc;
      text-align: center;
      float: center;
      padding: 20px 0;
  }
  footer ul{
      margin:0 0 0 8%;
      padding:0;
  }
  
  /* Footer social links */
  .social-fb {
      width: 400px;
      padding: 20px;
      overflow: hidden;
  }
  
  .social-fb img, .social-fb h3 {
      float: left;
      width: 13%;
      line-height: 1em;
      margin-right: 15px;
  }
  
  .social-tw {
      width: 400px;
      padding: 20px;
      overflow: hidden;
  }
  
  .social-tw img, .social-tw h3 {
      float: left;
      width: 13%;
      line-height: 1em;
      margin-right: 15px;
  }
  </code></pre>