How to make text input box to occupy all the remaining width within parent block in a Web page? Options

codeling 1302 - 5562
@2015-12-19 15:55:11

Originally I have a Web page with the following layout:

I don't like the above layout, and I want two buttons right align with the second input box, and first input box occupy the remaing width in the same row, just like the payout preseted below:

Having tried several solutions, I choose to use  HTML table elment to achieve the result, see the following post for details.

 

 

codeling 1302 - 5562
@2015-12-19 16:12:04

The following html code defines the payout:

<table style="margin: 0px; padding: 0px; width: 100%; border-spacing: 0px">
 <tr>
  <td style="margin: 0px; padding: 0px; width: 100%;">
   <asp:TextBox id="_toTextBox" Width="100%" runat="server"/>
  </td>
  <td></td>
  <td style="margin: 0px; padding: 0px;">
   <table style="margin: 0px; padding: 0px; border-spacing: 0px">
    <tr>
     <td style="margin: 0px; padding: 0px;">
      <asp:button runat="server" id="FindUsers"/>
     </td>
     <td></td>
     <td style="margin: 0px; padding: 0px;">
      <asp:button runat="server" id="AllUsers"/>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

Some explainations:

1. The first table element is to ensure textbox (_toTextBox) and second table is laid out in one row.

2. the second table is to ensure two buttons is laid out in one row.

3. Set textbox's Width as "100%".

4. Add an empty cell <td></td> in both tables to ensure some space among these controls.

5. Don't forget the apply "border-spacing: 0px" style to both tables!!

Users browsing this topic
Guest