title: Setting Column Widths using Javascript
body: <p>I'm Trying to Figure out how to set column widths and heights using javascript so that i can set them according to the browser window. i figured the following code. but its not working. please help</p>
  
  <pre><code>&lt;script type="javascript"&gt;
  function size()
  {
                      document.getElementById("body").style.width=window.innerWidth;
  document.getElementById("body").style.height=window.innerHeight;
  var width=document.getElementById("body").style.width;
  var height=document.getElementById("body").style.height;
  
  document.getElementById("header").style.height=(.15*height);
  document.getElementById("loginbox").style.height=(.15*height);
  document.getElementById("navigation").style.height=(.05*height);
  document.getElementById("leftpanel").style.height=(.70*height);
  document.getElementById("contentarea").style.height=(.75*height);
  document.getElementById("addcolumn").style.height=(.75*height);
  document.getElementById("footer").style.height=(.10*height);
  
  document.getElementById("header").style.width=(.75*width);
  document.getElementById("loginbox").style.width=(.25*width);
  document.getElementById("navigation").style.width=(width);
  document.getElementById("leftpanel").style.width=(.20*width);
  document.getElementById("contentare").style.width=(.65*width);
  document.getElementById("addcolumn").style.width=(.15*width);
  document.getElementById("footer").style.width=(width);
  }    
  &lt;/script&gt;
  </code></pre>
  
  <p>i use css to float the columns according to requirement.
  and then i'm calling the function size() in body ( onload=size() )</p>
  
  <p>but not working</p>