CODEWITHSUNDEEP
htmlcsshtml-tablecss-float
Roland
Roland

Reputation: 7853

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>

Upvotes: 5

Views: 10328

Answers (5)

Himanshu Bansal
Himanshu Bansal

Reputation: 2093

Use style="float: right;"

<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>

Upvotes: 5

Roland
Roland

Reputation: 7853

Based on Gerard's answer the following worked best for me:

<table border="1px">
  <tr>
    <td>
      <div style="display: inline-flex; align-items: center; width: 100%;">
        <div>
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="padding: 5px;">
          <button type="button">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Upvotes: 3

Hemant Kumar
Hemant Kumar

Reputation: 367

You can use a <table> and place the form in one <td> and the button in the other. Then you can fix the width of the <td> containing the button. This will force the first <td> to adjust its width according to the <table> width.

Check this jsFiddle, try to change the width of the main table and see how the <textarea> (and the <td>) adjust the width accordingly.

Update:

How about this, with no changes to your HTML structure:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
<table border="1px" style="width: 450px">
  <tr>
    <td>
      <div style="display: table; width: 100%">
        <div style="display: table-row">
          <div style="display: table-cell">
            <span style="display: block; width: 100%">
              <form style="display: block; width: 100%">
                <textarea style="display: block; width: 100%"></textarea>
              </form>
            </span>
          </div><!-- table-cell -->
          <div style="display: table-cell; width: 32px;">
            <button type="button" class="btn btn-primary">
              Click
            </button>
          </div><!-- table-cell -->
        </div><!-- table-row -->
      </div><!-- table -->
    </td>
    <td>Another cell</td>
  </tr>
</table>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

you could decrease the font-size of the button so it fits inside the desired width (32px) you've set to the parent div

don't really understand your logic behind this html structure, but here is your solution

<table border="1px">
  <tr>
    <td>
      <div>
        <div style="width:calc(100% - 32px);overflow: auto;float:left">
          <span>
            <form>
            <textarea></textarea>
            </form>
          </span>
        </div>
        <div style="float: right;">
          <button type="button" class="btn btn-primary" style="width:32px;font-size:8px;" title="Select Financial Instrument">
            Click
          </button>
        </div>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Upvotes: 2

Gerard
Gerard

Reputation: 15786

Is this what you need?

<table border="1px">
  <tr>
    <td>
      <div style="display: flex;">
        <form>
          <textarea></textarea>
        </form>
        <button type="button" class="btn btn-primary" title="Select Financial Instrument">
            Click
        </button>
      </div>
    </td>
    <td>Another cell</td>
  </tr>
</table>

Upvotes: 2

Related Questions