How can multiple (dynamically sized) divs share 100% width?

Answer 1

Tables are supposed to be evil, but they seem to solve the problem. I'm still interested in a solution without javascript or tables, if anyone can find one...

Distribute remaining space with ratio 70:30

<table width="100%">
  <tr>
    <td style="width:70%">
      <input style="width:100%"/>
    </td>
    <td>
      <a>Some Text</a>
    </td>
    <td style="width:30%">
      <input style="width:100%"/>
    </td>
  </tr>
</table>

First input field uses up all remaining space, while the last box has a fixed width:

<table width="100%">
  <tr>
    <td style="width:100%">
      <input style="width:100%"/>
    </td>
    <td>
      <a>Some Text</a>
    </td>
    <td style="width:100px">
      <input style="width:100px"/>
    </td>
  </tr>
</table>

Answer 2

@RoToRa: Thanks for the tip. I guess this is the final solution for this problem:

Distribute 70:30

<div style="display:table; width:100%">
  <div style="display:table-cell; width:70%">
    <input style="width:100%"/>
  </div>
  <div style="display:table-cell; width:1px">
    <a style="white-space:nowrap">Some Text</a>
  </div>
  <div style="display:table-cell; width=30%">
    <input style="width:100%;" />
  </div>
</div>

Solution, where the first input field grabs all excess space, and the final input field has fixed width:

<div style="display:table; width:100%">
  <div style="display:table-cell; width:100%">
    <input style="width:100%"/>
  </div>
  <div style="display:table-cell; width:1px">
    <a style="white-space:nowrap">Some Text</a>
  </div>
  <div style="display:table-cell; width=100px">
    <input style="width:100px;" />
  </div>
</div>

Answer 3

What is determining the width of the middle div? As my rep score will atest I am not a very experienced developer, but I think this is the crux of your problem. If it litterally does not matter what the middle column's width is then a div ratio of 70%, 0%, 30% and 7%, 90%, 3%. are mathematically equivlent answers to your problem. So your solution could be as simple as:

<div style="width:100%">
   <div style="float:left; width:7%">Some elements here.</div>
   <div style="float:left; width:90%">Some more elements here.</div>
   <div style="float:left; width:3%">Even more elements here.</div>
</div>