How to align all fields with increasing label width

Question

I have a form where the labels are on the left and the fields are on the right. This layout works great when labels have a small amount of text. I can easily set min-width on the labels so that they all have the same distance to the margins. In the first image below, this works as expected. The problem occurs when the label text becomes too long, either overflows to the next line, or clicks the field on one line to the left (as shown in Figure 2).

This does not push other shortcuts, so it remains “jagged”. Ideally, he would like to style it as image 3 with something like the following markup:

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

I created jsFiddle to show the problem.

Of course, a simple cross-browser way to solve this problem is to use tables. It just creates a hell tag for something that should be so simple. Note: this does not require IE6 support.

Answer 1

Are you trying to create tables ... without tables? This seems to be a situation where using tables is a great solution. And I don’t understand what tag-hell is. Of course, tables need several tags, but what? You can wrap everything in a div and simulate the table cells using float, but then you will have css-hell;).

Answer 2

I think this is what you are looking for:

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

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

Answer 3

How 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; } 

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

Answer 4

Either use tables, or some kind of CSS layout structure as a plan. http://www.blueprintcss.org/

Answer 5

Width aligns left and right columns and vertical 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; } 

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