CODEWITHSUNDEEP
htmlcsshtml-tablecss-float
Roland
Roland

Reputation: 7875

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

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

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

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

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