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 the width of the label at 180px, but if there I have larger text (one word larger than 180px), it's not showed completely.

I've tried to set in css the width of the labels as 'auto', but I don't want different widths of labels in the same column.

The result shall look like this:

Firstname:    Jeff
Enciclopedia: Yes
Town:         Tokyo

How can I resolve this with Css?

Thanks a lot,

Jeff

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:

 <form>
     <fieldset>
         <p><label for="lorem">lorem</label><input type="text" id="lorem" /></p>
         <p><label for="ipsum">ipsum</label><input type="text" id="ipsum" /></p>
         <p><label for="li">li</label><input type="text" id="li" /></p>
     </fieldset>
 </form>

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 <ol>) that you can use without adding semantic garbage.

A example would be:

 <form>
     <fieldset>
         <legend>First Example:</legend>
         <ol>
             <li><label for="lorem">lorem</label><input type="text" id="lorem" /></li>
             <li><label for="ipsum">ipsum</label><input type="password" id="ipsum" /></li>
             <li><label for="li">li</label><input type="text" id="li" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Second Example:</legend>
         <ol>
             <li><label for="a">a</label><input type="text" id="a" /></li>
             <li><label for="b">b</label><input type="number" id="b" /></li>
             <li><label for="c">c</label><input type="range" id="c" /></li>
         </ol>
     </fieldset>

     <fieldset>
         <legend>Third Example:</legend>
         <ol>
             <li><label for="XXXXXXXX">XXXXXXXX</label><input type="email" id="XXXXXXXX" /></li>
             <li><label for="YYYYYYYYYYYY">YYYYYYYYYYYY</label><input type="search" id="YYYYYYYYYYYY" /></li>
             <li><label for="z">z</label><input type="text" id="z" /></li>
         </ol>
     </fieldset>
 </form>

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:

 <form>
     <label for="lorem">lorem<input type="text" id="lorem" /></label>
     <label for="ipsum">ipsum<input type="text" id="ipsum" /></label>
     <label for="li">li<input type="text" id="li" /></label>
 </form>

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 <fieldsets> with <legend>s isn't adding unnecessary markup, on the contrary: it helps you to group the inputs. And adding a <ol> 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:

 <form>
     <ol>
         <fieldset>
             <legend>Account</legend>
                 <li><label for="username">Username</label><input type="text" id="username" required  /></li>
                 <li><label for="password">Password</label><input type="password" id="password" required  /></li>
         </fieldset>

         <fieldset>
             <legend>Personal Data</legend>
                 <li><label for="name">Name</label><input type="text" id="name" /></li>
                 <li><label for="surname">Surname</label><input type="text" id="surname" /></li>
                 <li><label for="dob">Date of birth</label><input type="date" min="1900-01-01" max="2012-02-17" placeholder="YYYY-MM-DD" id="dob" /><span class="additionalInfo">Please input the date of birth in the following format: YYYY-MM-DD</span></li>
         </fieldset>

         <fieldset>
             <legend>Contact Information</legend>
                 <li><label for="email">E-mail</label><input type="email" id="email" required placeholder="[email protected]" /></li>
                 <li><label for="tel">Telephone number</label><input type="tel" id="tel" placeholder="(555) 555-5555"
              pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><span class="additionalInfo">Please input the telephone number in the following format: (555) 555-5555</span></li>
                 <li><label for="url">Website</label><input type="url" id ="url" placeholder="http://www.example.com"></li>
         </fieldset>

         <li><input type="submit" /></li>
     </ol>
 </form>

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 <ol> 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 <li>in the second and in the last example, the <label> in the minimal one and the <p> 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.

Answer 2

The easiest would be to select a fixed size large enough.

If you really want to simulate the exact behavior of a table you have two choices:

• use table

• simulate table with CSS:

  .block { display: table; }
  .row   { display: table-row; }
  label { display: table-cell; }
  

With the following HTML:

<div class="block">
  <div class="row">
    <label>...</label><div class="value">...</div>
   </div>
   ...
</div>

I don't think there exists another way of dealing with this. If you really don't want to change your HTML, your only hope might be to use javascript.