how to make auto Resize
<p>let say there are three column in a container, if i minimize the width of any element then  adjacent element should cover the area by maximize it's width.  <a href="http://jsfiddle.net/sadrana/SrJfu/6/" rel="nofollow">my live example on jsfiddle</a>
What i want :<br>
<strong><em>1. if any element resize (minimize or maximize) then adjacent element should auto adjust the width<br>
 2.container has fix size and should not be change the dimension<br>
3. element must be auto fit inside the container</em></strong><br>
is there any way to use handler e.g. jQuery uses in it's layout <a href="http://layout.jquery-dev.net/demos/layout_inside_dialog.html" rel="nofollow">ui-resizable-handle</a></p>

<pre><code>   &lt;div id = "container"&gt;
      &lt;div id = "element1"&gt; &lt;/div&gt;
      &lt;div id = "element2"&gt; &lt;/div&gt;
      &lt;div id = "element3"&gt; &lt;/div&gt;
    &lt;/div&gt;


    #element1 {width:30%; height:100;}
    #element2 {width:40%; height:100;}
    #element3 {width:30%; height:100;}
</code></pre>
