title: CSS and Label Input alignment vs. tables
body: <p>This is what I'm trying to accomplish:</p>
  
  <pre><code>First Name: Textbox 
  Last Name: Textbox 
  ... 
  more labels with unknown widths: more text boxes
  </code></pre>
  
  <ul>
  <li>Using a table it's dead easy to accomplish this </li>
  <li>Using CSS is also dead easy, for as long as you somehow indicate the
  width of the label(either  percentage or hard coded) </li>
  <li>Using jquery to re-calculate the max width and assign it to all
  labels is also easy</li>
  </ul>
  
  <p><strong>Problem</strong> None of the above is elegant. </p>
  
  <p>I want a generic CSS that  I can use across all of my websites, where I can display a right aligned group of labels for my inputs and if later the text for one of my label is changed I don't have to redeploy my entire code just to change a darn width value </p>
  
  <p>Something like:</p>
  
  <pre><code>&lt;div class="labelInputArea"&gt;
      &lt;label for="userName" class="lable"&gt;User Name:&lt;/label&gt;
      &lt;input name="userName" type="text" value="" /&gt;
  &lt;/div&gt;
  &lt;div class="labelInputArea"&gt;
      &lt;label for="password" class="lable"&gt;Password:&lt;/label&gt;
      &lt;input name="password" type="text" value="" /&gt;
  &lt;/div&gt;
  &lt;div class="labelInputArea"&gt;
      &lt;label for="longText" class="lable"&gt;Some Long Label:&lt;/label&gt;
      &lt;input name="longText" type="text" value="" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in my .css I would have something like:</p>
  
  <pre><code>.labelInputArea 
  {
      display:block;
  }
  .labelInputArea .label
  {
      text-align:right;
      display:inline;
  }
  
  .labelInputArea input
  {
      text-align:left;
      display:inline;
  }
  </code></pre>