Roland Roland -4 years ago 132
CSS Question

Align button to the right in td element

I have a

<td>
element with content and a button. The
width
of the content should be all except the width of the button which will be fixed. The button should be aligned to the right of the content. How can I achieve this, the following doesn't work:



<table border="1px">
<tr>
<td>
<div>
<div style="width: auto; overflow: auto;">
<span>
<form>
<textarea></textarea>
</form>
</span>
</div>
<div style="float: right; width: 32px;">
<button type="button" class="btn btn-primary">
Click
</button>
</div>
</div>
</td>
<td>Another cell</td>
</tr>
</table>




Answer Source

<table border="1px">
  <tr>
    <td>
      <div style="display:inline-block">
        <div style="display: inherit;width: calc(100% - 32px);overflow: auto;">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right; width: 32px;">
          <button type="button" class="btn btn-primary" title="Select Financial Instrument" style="width:100%; word-wrap: break-word;">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download