How to align all fields as label width grows

Question

I have a form where the labels are on the left and the fields on the right. This layout works great when the labels have small amounts of text. I can easily set a min-width on the labels to ensure they all have the same distance to the fields. In the first picture below, this works as expected. A problem arises when the label's text becomes too long, it'll either overflow to the next line or push the field on the same line over to the left (as seen in picture 2).

This doesn't push the other labels so it is left with a "jagged" look. Ideally, it should like to style it as picture 3 with something like the following markup:

<fieldset>
    <label>Name</label><input type="text" /><br />
    <label>Username</label><input type="text" />
</fieldset>

I created a jsFiddle to show the issue.

alt text

Of course, the easy cross-browser way to solve this would be to use tables. That just creates tag-hell for something that should be so simple. Note: this does not need to support IE6.

Possible duplicate of [How to align input forms in HTML](http://stackoverflow.com/questions/4309950/how-to-align-input-forms-in-html) — Clément, Aug 23 '16 at 00:02

score 11 · Accepted Answer · answered Jan 16 '11 at 18:56

11

You're trying to create tables... without tables? Seems to me this is a situation where using tables is a perfectly fine solution. And I don't see what the 'tag-hell' should be. A tables needs a few more tags, sure, but so what? You could wrap everything in divs and simulate table cells with floats, but then you'll have a css-hell ;) .

answered Jan 16 '11 at 18:56

Alec

9,000
9
39
43

3

Forms are not tables; it is not a tabular display of data. For one, each row does not contain data in the same format as the previous row. They may be _grids_, but that is entirely layout (i.e. presentational), and not semantic. – Domenic Jan 16 '11 at 18:57
1

On the surface, very simple forms *look* like tabular data. This quickly falls apart as the forms achieve moderate levels of complexity (such as getting a radio group). – Quentin Jan 16 '11 at 18:57
2

I disagree with the assertion that tables are evil. I think using them to simulate CSS styles are a bad idea, but using them a grid seems okay to me... Google uses tables for form data. – Robert Jan 16 '11 at 19:00
Google is a terrible example of best practices in HTML... If you don't care about semantic markup, and just want to "get the job done", then sure, go ahead and emulate Google---it's not like Google needs to perform SEO, anyway. But, if like the OP, you want your markup to reflect your content, tables should not be used for grids. They should be used for _tabular_ data. – Domenic Jan 16 '11 at 19:02
2

Alright, here's a better example for you then, w3 uses tables for forms. But I guess we shouldn't rely on them either? http://www.w3.org/Consortium/application – Robert Jan 16 '11 at 19:04
@Robert, my thoughts exactly. Sure, a label and a form element aren't the same as a list of numbers. But the way you want to present them on the page is the same. There's nothing wrong with using tables for formatting forms. The alternative is, like I said, simulating table cells with divs and a bunch load of CSS. – Alec Jan 16 '11 at 19:05
1

Well, I am feeling a bit baffled by the W3C's use of them, but I still maintain that Alec's sentence "...the way you want to _present them on the page_ is the same" points out the flaw in his argument, at least to those of us who care about semantic argument. Presentation should not dictate markup; otherwise we're back in the days of `` and `` (which now have nicely-defined semantic meanings in HTML5 that a screenreader can make sense of). – Domenic Jan 16 '11 at 19:09
11

[W3C on tables](http://www.w3.org/TR/html401/struct/tables.html#h-11.1): "The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells." And since this is exactly what the OP wants to do, there's nothing wrong with using tables. But if you want to insist that _tabular data_ can only be a list of numbers and in _every other situation_ you should avoid tables, wrap everything in a block elements and write a lot of CSS, I won't stop you. – Alec Jan 16 '11 at 19:23
While I agree you shouldn't nest tables, I can see an argument of viewing a form as data, with each `` being a new question, not using them to separate radio buttons/checkboxes etc. – Robert Jan 16 '11 at 19:25
@Alec - +1, you've made a very good point. This form layout *is tabular*, therefore it should be using tables. I didn't mean to spark a religious argument about tables vs non-table layouts, but I should have figured it was unavoidable :). Thanks! – TheCloudlessSky Jan 16 '11 at 19:30
1

Thank you W3C God, now I have some consistent argument to throw when the religious war will start again with my co-workers :) – Guillaume Aug 08 '14 at 18:39
In case anybody still thinks the W3C supports this, from the HTML 5 spec: 'Tables should not be used as layout aids.' https://www.w3.org/TR/html51/tabular-data.html#tabular-data – Sam Bull Oct 05 '17 at 17:30

score 8 · Answer 2 · answered Jan 16 '11 at 18:56

8

I think this is what you're looking for:

label
{
    width: 150px;
    display: inline-block;
}
input[type=text]
{
    display: inline-block;
}

http://jsfiddle.net/rQ99r/5/

answered Jan 16 '11 at 18:56

Domenic

110,262
41
219
271

That won't work because the label text will simply be pushed to the next line when it reaches 300px. – Alec Jan 16 '11 at 18:59
Err, that's why you choose a value equal to the maximum width of your labels. – Domenic Jan 16 '11 at 19:01
And then you keep changing the max width when you add longer texts? That's not a solution. – Alec Jan 16 '11 at 19:02
2

Why not? How often does your "new user" form get new fields added to it? – Domenic Jan 16 '11 at 19:03
6

You should never ever count on text being a certain width to structure your layout accordingly. Font types and sizes can differ, text can be in a different language, etc. – Alec Jan 16 '11 at 19:07
Goodness, you might have to... _test_ your HTML page!? :O – Domenic Jan 16 '11 at 19:10
6

Testing is not the point, creating a flexible layout that works in _any situation_ is. – Alec Jan 16 '11 at 19:15

score 3 · Answer 3 · answered Jan 16 '11 at 19:02

3

What about this solution?

<fieldset id="fs1">
    <div class="column">
        <label>Name</label>
        <label>Username text text text </label>
    </div>
    <div class="column">
        <input type="text" />
        <br />
        <input type="text" />
    </div>
</fieldset>

css:

label
{
  display: block;
}
.column{
    float:left;
}

fiddle: http://jsfiddle.net/steweb/xzHe6/

answered Jan 16 '11 at 19:02

stecb

14,478
2
50
68

1

I'd say tables are still a better solution. At least the labels and inputs are then grouped by a table row and you have better control over line spacing, padding, etc. And this adds basically just as much tags to the mix as some table cells. – Alec Jan 16 '11 at 19:12
Yeah, tables are better and "easier" if you want to represent something that have a "table structure"..this particular case could be represented in both ways. Usually I use tables just to render some complicated grids. I just think this could be a good solution if someone want to represent this kind of form without using tables :) – stecb Jan 16 '11 at 19:20
I tried this before since it looked promising and then dumped it. What if the field is, for example, a textarea that spans multiple lines. Having the label align to the top of the *next field* would be a pain. http://jsfiddle.net/xzHe6/6/ – TheCloudlessSky Jan 16 '11 at 19:32

score 0 · Answer 4 · answered Sep 05 '17 at 13:58

Width align left and right columns and vertical align top

<fieldset>
    <label>Name</label><input type="text" /><br />
    <label>Username (aka aka aka aka aka aka aka aka aka aka aka)</label><input type="text" /><br />
    <label>Password</label><input type="text" /><br />
    <label>Confirm Password</label><input type="text" /><br />
</fieldset>

<br />
<label>Another label</label>

CSS:

fieldset label {
  display: inline-block;
  vertical-align: top;
  width: 150px;
  text-align: right;
  font: 11px Verdana;
  color: #003399;
  margin: 4px 4px 4px 4px;
}

fieldset input {
  display: inline-block;
  vertical-align: top;
  margin: 4px 4px 4px 4px;
}

fiddle: https://jsfiddle.net/46okafre/

score 0 · Answer 5 · answered Jan 16 '11 at 18:56

0

Either use tables, or some kind of CSS grid-layout framework like blueprint. http://www.blueprintcss.org/

answered Jan 16 '11 at 18:56

Satya

4,458
21
29

How to align all fields as label width grows

5 Answers5

Linked