title: Form submit button positing, fixed / absolute
body: <p>I have comments that are echoed out from my DB into their own containing divs.</p>
  
  <p>In this div i have a 'hidden' form that contains a report and / or delete button.</p>
  
  <p>When hovering a comment, the form is shown and it only shows the two buttons.</p>
  
  <p>This works fine. However what i want is for the buttons form to be always in the same place.</p>
  
  <p>At the moment it sits when if the comment text is short, but as soon as the comment is more than 1 line, the div sits underneath the content.</p>
  
  <p>I just want it fixed in the same place, in every single comment div. No matter how many lines it is etc.</p>
  
  <p>Here is a fiddle showing a basic example of what i mean:</p>
  
  <p><a href="http://jsfiddle.net/qzj49/" rel="nofollow">http://jsfiddle.net/qzj49/</a></p>
  
  <p>I just need the form with the buttons in to be fixed, and appear over the text of the comment.</p>
  
  <p>Code just incase:</p>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.textcomment {
      color: #666; width: 98%; 
      padding-left: 1%; 
      padding-right: 1%; 
      font-size: 12px; 
      padding-bottom: 1%; 
      padding-top: 1%; 
      border-bottom: 1px solid #ccc;
  }
  
  .textcomment:hover {background-color: #efefef;}
  .nocomments {
      width: 100%; 
      color: #888; 
      font-size: 12px; 
      padding-bottom: 1%; 
      padding-top: 1%;
  }
  
  .commentActionButton {
  display: none;
  top: 0;
  float:right;
  width: 14%;
  z-index: 999;
  }
  
  .delrepcomment {}
  
  .deletecommentsubmit {
  background-color: #F00;
  border: none;
  color: #fff;
  opacity: 0.4;
  float:right;
  width: 48%;
  margin-right: 0%;
  padding: 2%;
  }
  
  .reportcommentsubmit {
  background-color: #F90;
  border: none;
  color: #fff;
  opacity: 0.4;
  float:right;
  width: 48%;
  margin-right: 4%;
  padding: 2%;
  }
  
  .reportcommentsubmit:hover, .deletecommentsubmit:hover {
  opacity: 0.9;
  cursor: pointer;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class='textcomment'&gt;
      &lt;a class='userights1'&gt;Username:&lt;/a&gt;&amp;nbsp;
      This is a comment
      &lt;div class='commentActionButton'&gt;
          &lt;form action='#' method='post' class='delrepcomment'&gt; 
              &lt;input type='hidden' name='delcommentid'&gt;
              &lt;input type='hidden' name='postowner'&gt;
              &lt;input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'&gt;
  
          &lt;/form&gt; 
          &lt;input class='reportcommentsubmit' name='submit-report' type='submit' value='report'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='textcomment'&gt;
      &lt;a class='userights1'&gt;Username:&lt;/a&gt;&amp;nbsp;
      This is a comment that extends to more than 1 line long... This is a comment that extends to more than 1 line long... 
      &lt;div class='commentActionButton'&gt;
          &lt;form action='#' method='post' class='delrepcomment'&gt; 
              &lt;input type='hidden' name='delcommentid'&gt;
              &lt;input type='hidden' name='postowner'&gt;
              &lt;input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'&gt;
          &lt;/form&gt; 
          &lt;input class='reportcommentsubmit' name='submit-report' type='submit' value='report'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class='textcomment'&gt;
      &lt;a class='userights1'&gt;Username:&lt;/a&gt;&amp;nbsp;
      This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... This is a comment that extends to more than 2 lines long... 
      &lt;div class='commentActionButton'&gt;
          &lt;form action='#' method='post' class='delrepcomment'&gt; 
              &lt;input type='hidden' name='delcommentid'&gt;
              &lt;input type='hidden' name='postowner'&gt;
              &lt;input class='deletecommentsubmit' name='submit-delete' value='delete' type='submit'&gt;
          &lt;/form&gt; 
          &lt;input class='reportcommentsubmit' name='submit-report' type='submit' value='report'&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>// Show the delete / report comment on hover
  $(".textcomment").hover(function() {
      var $this = $(this);       
      $(this).closest('.textcomment').find('.commentActionButton').toggle();
  });
  </code></pre>