title: Resize div width based on browsers
body: <p>I am new to jquery. Below is my html structure, where in content and grid has css with width as 100%. This works perfectly in IE8 where as in firefox and google chrome the div width spans and has to scrolled towards right. </p>
  
  <pre><code>&lt;div id="content"&gt;
       &lt;div id="grid"&gt;
            &lt;table id="test"&gt;
            &lt;/table&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However i am using below jquery function to dynamically resize div width based on browser for ff and chrome.but its not working. Can anyone help me?</p>
  
  <pre><code>$(window).resize(function () {
       var windowWidth = $(window).width();
       $('content').css({'width':windowWidth });
  });
  .resize();
  </code></pre>
  
  <p>css post:</p>
  
  <pre class="lang-css prettyprint-override"><code>#content{
       padding-right: 0px; 
       padding-left: 0px; 
       padding-bottom: 0px; 
       margin: 3px 28px 2px 14px; 
       width: 100%; 
       padding-top: 0px;
       height: 70%;
  }
  #grid {
      width: 100%;
      /* following rules for illustration */
      background-color: blue;
      min-height: 100px;
      padding-right: 0px; 
      padding-left: 0px;  
      padding-bottom: 0px;
      margin: 0px 0px 10px; 
      padding-top: 0px; 
  }
  </code></pre>