Home/ Questions/Q 3693152
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T04:20:39+00:00

I have a form where the labels are on the left and the fields

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 😉 .

    • 0