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

## Problem

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?

Problem courtesy of: Roman Flückiger

#### Solution

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

Solution courtesy of: Roman Flückiger