title: Align anchor tags below a div
body: <p>I have 2 tables which appear side by side, and I have 2 button related to each of these tables
  and I want the button (anchor tags) to appear below the table while the table remains side by side</p>
  
  <p>my table structure is as follows:</p>
  
  <pre><code>&lt;div id="table"&gt;
  &lt;div id="detail-table"&gt;
  &lt;table&gt;
  ...some table data...
  &lt;/table&gt;
  &lt;a href&gt;&lt;/a&gt;
  &lt;a href&gt;&lt;/a&gt;
  &lt;/div&gt; // detail-table close
  &lt;div id="no-detail-table"&gt;
  &lt;table&gt;
  ...some table data...
  &lt;/table&gt;
  &lt;a href&gt;&lt;/a&gt;
  &lt;a href&gt;&lt;/a&gt;
  &lt;/div&gt; // no-detail-table close
  &lt;/div&gt; // table div close
  </code></pre>
  
  <p>related CSS:</p>
  
  <pre><code>div#table{
      margin: 0;
      padding: 0;
      text-align: center;
  }
  
  table{
      display:inline-block;
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  
  }
  </code></pre>
  
  <p>I want the output to be like this (see image): I tried the float property and position:absolute, top:
  , left:!, but couldnt get desired output</p>
  
  <p><img src="https://i.stack.imgur.com/XCcla.png" alt="enter image description here"></p>
  
  <p>JSFIDDLE: <a href="http://jsfiddle.net/a8THA/" rel="nofollow noreferrer">http://jsfiddle.net/a8THA/</a></p>