Question

I’ve got following html structure:

<div style="width:100%">
  <div style="float:left; width:70%"><input /></div>
  <div style="float:left">element with unknown width</div>
  <div style="float:left; width=30%"><input /></div>
  <div style="clear:both" />
</div>

What I’d like to achieve is the following:

• (Requirement) The outer div should use 100% of the screen width
• (Requirement) The three inner divs should share these 100% among themselves
• (Requirement) The second div, between the two others, occupies an unknown quantity of space
• The two input fields should use up all the remaining space, but the first one shall receive 70% of the remainder, while the third one gets 30%

How can something like this be done?

Answer 1

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