title: Positioning a button inside a div using css
body: <p>I have some html code, so:</p>
  
  <pre><code>&lt;div class="ui-tabs-panel"&gt;
      &lt;div class="dataTables_wrapper"&gt;
          &lt;div&gt;
              &lt;button&gt;Add Whatever&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The applied styles that have to do with positioning are:  </p>
  
  <pre><code>ui-tabs-panel { 
       display: block; 
  } 
  dataTables_wrapper: {
      clear: both, 
      position: relative;
  }  
  my_button div: ?  
  my_button: ?
  </code></pre>
  
  <p>The outside div is a jQuery tabs panel; the middle div is a stripped-down jQuery datatables table.  I want my button to be right-aligned, and inside the tab border.  I've tried a few things.  Applying these styles to the button itself:<br>
  1.   <code>float:right</code> right-aligns, but outside the tab border.<br>
  2.   <code>position: absolute</code> goes outside the tab border as well.<br>
  3.   <code>right: -91%</code> looks great when the screen is maxed, but starts cutting off the right edge of the button as I resize smaller.  (The button has a constant width.)<br>
  4.   <code>margin-left: 91%</code> does the same thing.</p>
  
  <p>I tried applying a <code>float: right</code> to the container div, and that still sticks it outside the tab panel.</p>
  
  <p>I could handle the resize event, and recalculate the percentage value of the right attribute in it, but that strikes me as going around the block to get next door.  What's the right way to do this in css?</p>