title: Auto Resizing the height and the width of a web application
body: <p>I'm developing a web app and i want to auto resize three columns divs filled with a background image in order to make them fill the whole page whenever i zoom in or out with ctrl- and + exactly like <a href="http://www.jsfiddle.net" rel="nofollow">jsfiddle.net</a>, here is what i have written to make this effect but it failed:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="three_columns_container"&gt;
       &lt;div id="first-column"&gt;...&lt;/div&gt;
       &lt;div id="second-column"&gt;...&lt;/div&gt;
       &lt;div id="third-column"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#first-column{
      background:('slice.png');
      width: 15%;
      height: 97%;
  }
  #second-column{
      background:('slice.png');
      width: 15%;
      height: 97%;
  }
  #third-column{
      background:('slice.png');
      width: 70%;
      height: 97%;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $(window).resize(function(){
        $("#three_columns_container").height() = $(window).height * 0.97;
        $("#three_columns_container").width() = $(window).width* 0.97;
      });
  </code></pre>
  
  <p>this link may help solving the problem but it doesn't make the exact effect
  <a href="http://www.manisheriar.com/holygrail/index.htm" rel="nofollow">link</a></p>
  
  <p>i was wondering if anybody can help me with this</p>