Display: Table and Table-Cell

Question

I want to make a following layout:

[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***____________________________________][__][____]

The elements without stars are with fixed width, with stars should fill all remaining space.

And here is the markup I came up with:

html:

<div class="wrapper">
 <div class="label">text</div><input type="text" class="valueField"/>
 <div class="label">text</div><input type="text" class="valueField"/>
 <div class="label">text</div><input type="text" class="valueField"/><div class="label">text</div><input type="text" class="valueField" id="fixed_valueField"/>
</div>

css:

.wrapper { display:table; width:100%; }
.wrapper > * { display:table-cell; width:auto; }
.label { width:5%; }
#fixed_valueField { width:15%; }

but on the third line my input element is not filling all available space:

[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***______________________________________________]
[___][_***________________][__][____]

Would appreciate any suggestions.

Answer 1

Add the remaining percents to your CSS and an important to your ID to override:

.valueField { width: 80%; }
#fixed_valueField { width: 15% !important; }

That should work

Answer 2

Smarter way to achieve your target would be to use <label> tags instead of div tag as it gives a better flow to form elements!

DEMO JSFiddle

HTML

 <div class="wrapper">
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="valueField"/></label> <br >
      <label for="">text<input type="text" class="span6"/><input type="text" class="span2"/><input type="text" class="span2"/></label> <br >
</div>

CSS

 label { width:100%;}
input {width:80%;margin-left:2%;border:1px solid #CCC}
.span6{width:45%} /*css for last row inputs*/
.span2{width:15%} /*css for last row inputs*/