title: How to set percentage width for a nested element not of direct parent but of parent's parent?
body: <p>I have three divs inside each other. I want the innermost div's width to be set in percent with respect to the div of the outermost div. This forms part of a row that has to be appended dynammiclly.</p>
  
  <pre><code>trHTML += '&lt;td id="'+tnum+'"&gt;
                &lt;div style="height: 20px;"&gt;//outermost div 100px width
                  &lt;div id="d'+divid +'" style="height: 20px;float:left;color: rgb(255, 255, 255);background-color: ' + color + '; font-weight: bold;font-family: Arial Black; width:'+ util +'%;"&gt;
                    ' + weekno.TotalUtilization +
                    '&lt;div style="float:right; height: 20px; background-color: rgb(102,197,232);width:'+ sfin +'%;"&gt;
                     &lt;/div&gt;
                   &lt;/div&gt;
               &lt;/div&gt;
             &lt;/td&gt;';
  </code></pre>
  
  <p>The width of second width is decided on the variable <strong>"util"</strong> in percentage, wrt to its parent. Width of innermost div is also decide dynamically by the variable <strong>"sfin"</strong>.I want the width of the innermost div to be also decided on the basis of the outermost div, not the second div as it happens.</p>
  
  <blockquote>
    <p><strong>Example:</strong> If outermostdiv width 100px; and util =50; then width of second div is 50px. and if sfin =50; then width of innermost div
    becomes 50% of 50px = 25px;I want sfin to be equal to 50% of 100=
    50px.</p>
  </blockquote>
  
  <p>What can be the ways to do this in Jquery and <strong>also to place the divs side by side</strong>? I'm new to coding so all the help is appreciated.</p>