CSS, how to create a label width of the longest containing text?

Question

I have a table with two columns, like this:

Firstname: Jeff

Where the first column is a label and the second one is an input. Now I\'m setting

Answer 1

You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;. Then you let all the input items float to the right, and you're done.

This results in a very simple, clean and semantic markup with eqaully clean and maintainable CSS, and no requirements for JavaScript, jQuery, or other fancy stuff.

You could make something like:

 

     

         
lorem
         
ipsum
         
li
     
 

with the css

 fieldset {
     min-width: 100px;
     display: inline-block;
 }

 fieldset input{
     float: right;
 }

Here you can see how that looks. Clearly you can style your form with margins, paddings etc.

And additionally if you want to have a wrapper that's semantically more accurate, you can use a ordered list. You can then style everything like you want to, and have even a nice additional wrapper (the

) that you can use without adding semantic garbage.

A example would be:

 

     

         
First Example:
         

             
lorem
             
ipsum
             
li
         
     

     

         
Second Example:
         

             
a
             
b
             
c
         
     

     

         
Third Example:
         

             
XXXXXXXX
             
YYYYYYYYYYYY
             
z
         
     
 

styled by

  fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

would result in this view. You can even play around with it on this fiddle: http://jsfiddle.net/ramsesoriginal/b6Taa/

EDIT to show how this adds no markup

With the following html:

 

     lorem
     ipsum
     li
 

and the following CSS:

form{
    min-width: 100px;
    display: inline-block;
}

form input{
    float: right;
}

form label{
    display:block;
    margin-bottom: 2px;
}

You get the effect that you want. You can play around with it here. But adding with

s isn't adding unnecessary markup, on the contrary: it helps you to group the inputs. And adding a

is semantically correct too, since the label/input combinations are semantic units and the form is a list of fields that have to be filled in a logical order.

Again, you can avoid the fieldsets, the lists, and everything and still achieve the desired effect, but semantically it would make sense to have at least the fieldset with a label..

EDIT2: this is how a "real" registration form with good semantic markup may look like:

 

     

         

             
Account
                 
Username
                 
Password
         

         

             
Personal Data
                 
Name
                 
Surname
                 
Date of birthPlease input the date of birth in the following format: YYYY-MM-DD
         

         

             
Contact Information
                 
E-mail
                 
Telephone numberPlease input the telephone number in the following format: (555) 555-5555
                 
Website
         

         

     
 

and the styling:

 fieldset {
     border: 1px solid silver;
     margin: 10px;
     padding: 10px;
     min-width: 100px;
     display: inline-block;
 }

 fieldset li{
     width: 100%;
     display: block;
     position: relative;
     margin-bottom: 2px;
 }

 fieldset label{
     margin-right: 10px;
     position: relative;
 }

 fieldset label:after{
     content: ": ";
     position: absolute;
     right: -0.2em;
 }

 fieldset input{
     float: right;
 }

 fieldset li .additionalInfo{
     position: absolute;
     padding: 5px;
     margin-top: 5px;
     display: none;
     background-color: white;
     border: 1px solid black;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.5);
     z-index: 10;
 }

 fieldset li:hover .additionalInfo{
     display: block;
 }

I included some additional info, to show you how it would all come together to one logical entity. Similarly you could include errors and whatever else you may want to include. This is just a quick example i threw together, but it's should show that you can achieve interesting things with this technique. One thing I also changed was that I put the

directly under the form, so you don't have to repeat it for every fieldset. I personally find this somehow.. unpleasing, but since you want to have minimal markup, this would work pretty well and would be very accessible. Again, read this article if you haven't. It provides some great insight in marking up correctly a form.

Oh, and the "real-life" example is visible here: http://fiddle.jshell.net/ramsesoriginal/b6Taa/9/show/

And you can play with it here: http://jsfiddle.net/ramsesoriginal/b6Taa/9/

EDIT: i updated the last example

There was an error in my code. The wrapper element (the

1. in the second and in the last example, the in the minimal one and the

   in the first one should have at least 1 pixel margin at the bottom, or else some browsers see the input fields as overlapping and won't float them correctly. I updated the last example so that it works there, everywhere else you should keep this in mind.