jQuery - CSS Layout - 1

by rajeshpillai

HTML

<div class="form">
    <div class="form-title">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="50"></textarea>
       </div> 
         
      
      <div class="field">
          <div class="row label-wrap">
              <label>Field 1</label>
              <input  type="text" />
           </div>    
          <div class="row label-wrap">
            <label>Field 2</label>
              <input  type="text" />
           </div> 
          <div class="row label-wrap">
            <label>Field 3</label>
              <input  type="text" />
           </div> 
      </div>          
      <div class="field">
          <div class="row label-wrap">
              <label>Field 1</label>
              <input  type="text" />
           </div>    
          <div class="row label-wrap">
            <label>Field 2</label>
              <input  type="text" />
           </div> 
          <div class="row label-wrap">
            <label>Field 3</label>
              <input  type="text" />
           </div> 
      </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;
    border-radius: 5px 5px 0 0;
    padding: 5px;
}

label, input[type="text"]{
    float:left;
    display:block;
}
label
{
    margin-right: 5px;
    margin-left: 5px;
    text-align:left;
}

.row {
    float:left;
}
.row.label-wrap {
    padding: 5px;
}
.row.label-wrap input{
    clear:both;
}

.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);
}