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.
Here's the html in its current vertical orientation (twitter on top, facebook below):
<header>
<div class=content-wrapper>
<h1>Duckbilled Platypi of the World Unite!</h1>
<div class=float-left>
<p class=site-title>
<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>Tweet</a>
<script>!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');</script>
<div class=fb-like data-href=http://www.duckbilledplatypi.com data-send=false data-width=450 data-show-faces=true data-font=segoe ui></div>
...and the Javascript (in context) just before the html shown above:
</head>
<body>
<div id=fb-root></div>
<script>(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'));</script>
<header>
What adjustment need I make to get them to look straightedged?
UPDATE
Changing it to this:
<div display:inline-block vertical-align:top>
<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>Tweet</a>
<script>!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');</script>
</div>
<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></div>
...did nothing.
Nor did using this instead:
display=inline-block vertical=align-top
(which is, I assume, what it should be for html, rather than the CSS-style I had before)
UPDATE
A related problem (clicking the cute little icons don't do anything/go anywhere) is defined here: http://forums.asp.net/p/1932048/5493924.aspx/1?Why+does+my+Linkshare+or+_SiteLayout+code+fail+in+my+azurewebsites+app+site+
