title: How can I get the Twitter and Facebook buttons to horizontally align?
body: <p>Using the html they allow you to generate, I've added Twitter and Facebook "Like" buttons to my site. They align vertically just fine, but that takes up too much space - I'd rather align them horizontally. So I removed the "div" from the facebook button. This indeed 
  places the facebook button to the right of the Twitter button, but a little bit askew/akimbo.</p>
  
  <p>Here's the html in its current vertical orientation (twitter on top, facebook below):</p>
  
  <pre><code>    &lt;header&gt;
          &lt;div class="content-wrapper"&gt;
              &lt;h1&gt;Duckbilled Platypi of the World Unite!&lt;/h1&gt;
              &lt;div class="float-left"&gt;
                  &lt;p class="site-title"&gt;
                      &lt;a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.duckbillplatypi.com" data-text="Czech out these Duckbilled Platypi" data-via="W_Epominandes_Blab"&gt;Tweet&lt;/a&gt;
                      &lt;script&gt;!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; 
  fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');&lt;/script&gt;
  
                      &lt;div class="fb-like" data-href="http://www.duckbilledplatypi.com" data-send="false" data-width="450" data-show-faces="true" data-font="segoe ui"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>...and the Javascript (in context) just before the html shown above:</p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
      &lt;div id="fb-root"&gt;&lt;/div&gt;
      &lt;script&gt;(function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));&lt;/script&gt;
      &lt;header&gt;
  </code></pre>
  
  <p>What adjustment need I make to get them to look "straightedged"?</p>
  
  <h2>UPDATE</h2>
  
  <p>Changing it to this:</p>
  
  <pre><code>&lt;div display:inline-block vertical-align:top&gt;
      &lt;a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.duckbilledplatypi" data-text="Duckbilled Platypi are awesomer by half again as much as Tapirs!" data-via="BClayShannon"&gt;Tweet&lt;/a&gt;
      &lt;script&gt;!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');&lt;/script&gt;
  &lt;/div&gt;
  &lt;div display:inline-block vertical-align:top class="fb-like" data-href="http://www.duckbilledplatypi" data-send="false" data-width="450" data-show-faces="true" data-font="segoe ui"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>...did nothing.</p>
  
  <p>Nor did using this instead: </p>
  
  <pre><code>display="inline-block" vertical="align-top" 
  </code></pre>
  
  <p>(which is, I assume, what it should be for html, rather than the CSS-style I had before)</p>
  
  <h2>UPDATE</h2>
  
  <p>A related problem (clicking the cute little icons don't do anything/go anywhere) is defined here: <a href="http://forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+" rel="nofollow">http://forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+</a></p>