1

I am trying to solve the problem presented in this original post. Basically, I would like to create a form where a labels and related inputs are on the same line. Labels have a fixed width and inputs extend for the remaining form width. Each label + input couple has its own line.

<form>
    <label for="name">Name:</label>
    <input id="name"/>

    <label for="email">Email:</label>
    <input id="email"/>
</form>

I've read the solution proposed in this post but I doesn't convince me much. I think it's not very semantic, because it introduces a formLine class. I may be super-fussy, but I think that HTML code should only contain semantic stuff (in this case label and input) and layout should be left to stylesheet only.

Does anybody have a clue to style the snippet above without adding not-semantic code? I think the key should be to tell input to occupy the remaining line space, to avoid to use something like <br/> after each input.

Community
  • 1
  • 1
Giorgio
  • 1,940
  • 5
  • 39
  • 64

1 Answers1

1

You can get this behaviour without changing your example markup by using the CSS calc(); function:

DEMO

label{
    display:inline-block;
    width:95px;
}
input{
    box-sizing:border-box;
    width:calc(100% - 100px);
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • This is nice. I thought about it, but unfortunately calc is not supported from IE8: [link](http://caniuse.com/#search=calc). Anyway this can be a hyper-fussy objection and your answer is very good. – Giorgio May 25 '14 at 09:42
  • @Giorgio yes, the support even though pretty good doesn't go that far... you can do this without the `calc()` function but it involves wrapping the input inside a span element witch doesn't seem to be your aim. – web-tiki May 25 '14 at 09:44
  • 1
    Yep, you are right again @web-tiki. I think your answer is the best solution for my problem and I'll accept it. Maybe I'll style labels and inputs as blocks for IE8 users only (I think no IE8-users would complain about it, eheh). – Giorgio May 25 '14 at 09:48