Layering and Positioning <div> without CSS

Here is my problem - I am trying to create a tab on Facebook. I want it to look like https://www.facebook.com/lyndadotcom/app_151503908244383. I have used the following code to get it going

<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>
<div style="background-image: url(https://d5gbfcxnxtt6i.cloudfront.net/files/Ed8h3D6Sny4O0Hgo5N9CqWw1t2Y7Ka.jpg); height: 720px; width: 780px; border: 1px solid black;">[B]<div width: 240px; height: 150px; background-color: pink; overall width 248px including 2*3px padding and 2*1px border class="fb-like" data-href="http://www.facebook.com/eSirt" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false" data-font="segoe ui"></div>[/B]</div>

HTML:

My problem is that the layer with the like button (in between [B} tag) does not move no matter what I do. I want it to move a little to the right and I little lower. What could be done to make it position like in the Lyndadotcom facebook tab page?