I am desperately trying to stay away from tables, I really am! But I am struggling with what seems like the simplest thing: Flexible LABEL + INPUT layout. Consider:
<div class="inputfield">
<label for="inp">My Label:</label>
<input id="inp"/>
</div>
I would like to style this so the structure is common to all my forms but the width of the label can be set in CSS and the width of the input takes up the rest of the horizontal space. Like a table would!
.inputField
{
position: relative;
padding: 10px;
}
.inputField label
{
display: inline-block;
width: 70px; /* Might change in other forms */
}
.inputField input
{
display: inline-block;
width: 100%; /* Really the 'rest' of the width to the right of the label */
}
This feels like a fixed-fluid 2-column problem. But I cannot find any way to do this without both columns knowing about the width of the fixed column. Worse, with the box-model I have to take borders into account with the input tag (and i'd like to stay away from CSS3's border-box because IE7 is on my radar).
I would also be nice to move label/inputs around via CSS without hacking around with the individual forms they're used on - label on top, to the right, etc. etc.
So how can I style a 'generic' label+input pair that i can use on numerous forms where the width of the lable might change without having to muck with label-width-specific hacks on the input tag?
