title: How do I base a CSS property on another element that isn't the direct parent?
body: <p>For example, I would like to make 3 <code>div</code> columns which are 5%, 15% and 25% the width of the page (<code>body</code>), respectively.</p>
  
  <p>Pseudo-Code (HTML):</p>
  
  <pre><code>&lt;div id="a"&gt;
      &lt;div id="b"&gt;&lt;/div&gt;
      &lt;div id="c"&gt;&lt;/div&gt;
      &lt;div id="d"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Pseudo-Code (CSS):</p>
  
  <pre><code>html
  {
      height: 100%;
  }
  
  body
  {
      height: calc(100% - 1em);
  }
  
  #a
  {
      width: 75%;
      height: 90%;
  
      background: grey;
  }
  
  #b
  {
      width: calc(width(body) * 0.05);
      height: 100%;
  
      background: red;
  }
  
  #c
  {
      width: calc(width(body) * 0.15);
      height: 100%;
  
      background: blue;
  }
  
  #d
  {
      width: calc(width(body) * 0.25);
      height: 100%;
  
      background: green;
  }
  </code></pre>
  
  <p>I would like to know how to do this without using scripts and definite numbers (such as <code>100px</code>), as a lot of answers (yes I have tried to Google for an answer) I've seen include these.</p>