Inline form, shrink to fit labels to the left

Question

The title says labels because that's my use case, but obviously it could be any element. What I'm trying to achieve is the following form layout:

        [label] [input]
[another label] [input]
  [third label] [input]

Currently my HTML roughly looks like (leaving out the details):

div {
    overflow: auto;
}
label, input {
    float: left;
}
label {
    text-align: right;
    width: 200px;
 }

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

However, the design requires me to shrink the labels to fit the tallest one, so I can't use a fixed width. I need the longest label to exactly fit between the left side of the screen and the input, and all the other labels should get that width too.

What I'm looking for is the best method to implement this layout while keeping the HTML as semantic as realistically possible (an extra div here or there isn't a problem, I use them now for a lot easier control over the vertical alignment and also some minor styling). Currently my text inputs happen to be the same size, but there's also some groups of radios/checkboxes that would have to reside in the [input] section.

Also, I'd like to keep my options open for the use of media queries to apply some RWD elements. This isn't a big requirement for this specific project, but you never know. Oh, and I have to support IE as low as 9, unfortunately.

How would I address these issues in a semantically correct (i.e. not using tables) way that is supported by IE9 and IE10?

score 1 · Answer 1 · answered Sep 19 '14 at 01:12

1

One wild idea is to group labels and inputs together is separate divs. The tricky part would be to line them up correctly through line-height.

<div id="labels">
  <label>...</label>
  ...
</div>
<div id="inputs">
  <input>...</input>
  ...
</div>

CSS:

#labels {
    float: left;
}
#labels label {
    display: block;
    text-align: right;
    line-height: 20px;
}
#inputs input {
    display: block;
    line-height: 20px;
}

answered Sep 19 '14 at 01:12

beautifulcoder

10,832
3
19
29

Thanks, I've actually considered this method but I'm afraid it's going to be very hard to maintain. If I have a form with say 20 inputs, I have two very long divs in the code that I have to keep scrolling up and down in to find the inputs matching the labels and vice versa. And yeah, it can be tricky to align them too. – Stephan Muller Sep 19 '14 at 10:25

score 0 · Accepted Answer · answered Sep 22 '14 at 11:19

Apparently I had the wrong idea about using display: table-cell or I did something wrong in my initial tests. This seemed to be enough to get exactly how I wanted it

div {
    display: table-row;
}
label, input {
    display: table-cell;
}
label {
    text-align: right;
}

<div>
    <label>Label</label> 
    <input type="text">
</div>
<div>
    <label>Another label</label> 
    <input type="text">
</div>
<div>
    <label>Third label</label> 
    <input type="text">
</div>

Inline form, shrink to fit labels to the left

2 Answers2

Linked