Search code examples
htmlcssbuttonhtml-tablevertical-alignment

Position a HTML button to bottom right of a table

Tried various solutions but I can't get any to work and I have a very hard time getting my head about positioning HTML elements. This one should be about as easy as they come imo. Still...

NOTE: The button is NOT to be part of the table.

I have a table and I want to position a button to the right of the table, with the bottom of the button bottom vertically aligned to the bottom of the table.

Edited to provide basic layout.

<table id="someTable">
  <tr>
    <td>SomeCell</td>
  </tr>
</table>
<button id="somebutton">
  A button
</button>
Solution

  • Managed to get it working.

    <div>
  <table id="someTable">
    <tr>
      <td>SomeCell</td>
    </tr>
  </table>
  <button id="someButton">
    A button
  </button>
</div>

#someTable
{
  display: inline-table;
}
#somebutton
{
  display: inline-block;
  vertical-align: bottom;
}

    http://jsfiddle.net/Pf9Y7/