Getting two inner divs to use 100% of available width

[BigDog604]

I have a div tag that is set to have a width of 100%. Inside this div tag I have two div tags. Div tag A contains a text field with a width of 100%. Div tag B contains a button that has an unknown width because the text of the button can be changed at any time, and so the button shrinks and grows with the length of the text displayed on the button.

My goal is to have the text box on the left, and the button on the right. I want the text box to fill up whatever space is left over from the button. So as the button grows, the text box shrinks, and vice-versa.

My current implementation is to have Div B (The one containing the button) first in the HTML with a float of right. I then have Div A (The one containing the text field) after that, with a float of left. In IE, this works perfectly. However, in FF Div A does not use all of it's remaining space.

Any suggestions? Thanks!

[csuguy]

This can better be implemented with a table:

<table style="width: #px">
  <tr>
   <td style="width:100%;">
     <!-- put your textbox or w/e else here -->
   </td>
   <td style="width:1%">
     <!-- put your button here -->
   </td>
  </tr>
</table>

the td containing the textbox will expand up until w/e the dynamic width of the button is. The 100% width won't cause the table to expand past w/e you set the width for the table as.