jQuery - CSS Layout - 2

by rajeshpillai

HTML

<div class="form">
    <div class="form-title top-curve">Customer</div>
    <fieldset>
      <div class="field">  
        <label for="name">Name</label>
        <input id="name" name="name"  type="text" />
          
        <label for="age">Age</label>
        <input id="age" name="age"  type="text" />
          
      </div>  
        
      <div class="field">
          <label for="email">Email Address</label>
          <input id="email" name="email"  type="text" />      
          
          <label for="phone">Phone No</label>
          <input id="phone" name="phone"  type="text" />      
      </div>
      
      <div class="field">
          <label for="message">Message</label>
          <textarea  rows="5" cols="70"></textarea>
      </div> 
        
     </fieldset> 
    
    
    <div class="form-title">Address</div>
    <fieldset>
      <div class="field">  
        <label for="address1">Address 1</label>
        <input id="address1" name="address1"  type="text" />
          
        <label for="address2">Address 2</label>
        <input id="address2" name="address2"  type="text" />
          
      </div>  
        
      <div class="field">
          <label for="city">City</label>
          <input id="city" name="city"  type="text" />      
          
          <label for="pincode">PinCode</label>
          <input id="pincode" name="pincode"  type="text" />      
      </div>
      
     </fieldset> 
</div>

CSS

.form {
    width:600px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
}
.form-title {
    margin:0;
    padding:0;
    height:20px;
    background-color: #eee;
    padding: 5px;
}

.top-curve {
   border-radius: 5px 5px 0 0;
}

label, input[type="text"]{
    float:left;
    display:block;
}
label
{
    margin-right: 5px;
    margin-left: 5px;
    text-align:left;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

JavaScript

$(function() {
    $('label').autoWidth({limitWidth: 350});
});

jQuery.fn.autoWidth = function(options)
{
  var settings = {
        limitWidth   : false
  }
  
  if(options) {
        jQuery.extend(settings, options);
  };
    
  var maxWidth = 0;
  
  this.each(function(){
        if ($(this).width() > maxWidth){
          if(settings.limitWidth && maxWidth >= settings.limitWidth) {
            maxWidth = settings.limitWidth;
          } else {
            maxWidth = $(this).width();
          }
        }
  });  
  
  this.width(maxWidth);
}