title: Position div on edges of div, vertically centered
body: <p>I am trying to achieve the following look on a website I am working on. Notice how the <code>+</code> and <code>X</code> buttons are aligned vertically on the edges of the image on the center of the page. I am able to achieve this effect using some JavaScript to move around the divs containing the buttons. However, this solution doesn't work in Firefox or IE. Only in Chrome and Safari (webkit). </p>
  
  <p><img src="https://i.stack.imgur.com/S0CNJ.png" alt="Demo Image"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="contest_image"&gt;
      &lt;img id="single_image" src="/img/ajax-loader.gif"/&gt;
  
      &lt;div class="large_vote_no downvoteclick"&gt;
          &lt;label for="large_no"&gt;&lt;img src="/img/sprite_imgs/contest/vote_no.png" class="down_vote"/&gt;&lt;/label&gt;
          &lt;button id="large_no"&gt;&lt;/button&gt;
      &lt;/div&gt; 
      &lt;div class="large_vote_yes upvoteclick"&gt;
          &lt;label for="large_yes"&gt;&lt;img src="/img/sprite_imgs/contest/vote_yes.png" class="down_vote"/&gt;&lt;/label&gt;
          &lt;button id="large_yes"&gt;&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="share"&gt;
          &lt;label class="grey"&gt;Share&lt;/label&gt;
          &lt;ul class="social_icons"&gt;
              &lt;li&gt;&lt;a href="" class="twit"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="fb"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#/" class="email"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function position_vote_buttons() {
      $(".large_vote_yes").css("visibility","visible");
      $(".large_vote_no").css("visibility","visible");
      $("#single_image").css("border","2px solid #0097fa");    
  
      var position = $("#single_image").position();
      var width = $("#single_image").width();
      var height = $("#single_image").height();
      $(".large_vote_no").animate({
          left: position.left-80,
          top: position.top +(height / 2) - 70
      },0);
      $(".large_vote_yes").animate({
          left: position.left+width-77,
          top: position.top +(height / 2) - 70
      },0);
  }
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.large_vote_yes, .large_vote_no {
      width:70px;  
      display:inline;
      position:absolute;
      top:0px;
      left:0px;
      vertical-align:middle;
      z-index:9999;
      visibility:hidden;
  }
  #large_yes, #large_no {
      border:none;
  }
  div#contest_image {
      clear:both;
      display:block;
      margin:0 auto 5px;
      width:800px;
      max-height:600px;
      padding-top: 15px;
      padding-bottom: 15px;
      text-align:center;
  }
  div#contest_image #single_image  {
      display:inline;
      vertical-align:middle;
      max-width:600px;
      max-height:600px;   
      position:relative;
      border:2px solid #;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;  
  }
  div#contest_image .up_vote, div#contest_image .down_vote {
      width:70px;
      height:70px;
      display:inline;
  }
  </code></pre>
  
  <p>Can anyone help to get these buttons to align properly across all modern browsers?</p>