title: set div width as a percentage of height
body: <p>I am trying to set the width of the <code>.full_height_div</code> element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (<code>.set_rectangle_height</code>) is already a div with height relative to the page width. Obviously, as the page is resized the <code>div</code>s on the page will resize, so i cannot set a fixed width in <code>px</code> for the <code>.full_height_div</code> child.</p>
  
  <p>So <code>.rectangle</code> and <code>.set_rectangle_height</code> make up the parent container which has a width as a percentage of the page and a height relative to this width. See <a href="http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio" rel="nofollow noreferrer">here</a> for an explanation for this method.</p>
  
  <p>But the problem is that then I want to place a div inside the parent with <code>height: 100%</code> and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.</p>
  
  <p><a href="http://jsfiddle.net/HSvW4/1/" rel="nofollow noreferrer">here is my failed attempt:</a></p>
  
  <pre><code>.rectangle
  {
      position: relative;
      width: 30%;/*the outermost div is always a % of the page
  width, even while resizing*/
      display:inline-block;
      background-color: green;
  }
  .set_rectangle_height
  {
      padding-bottom: 30%;/*this sets the height of the outermost div
  to a ratio of 1:3*/
      position: relative;
      float: left;
      width: 100%;
      height: 100%;
  }
  .full_height_div/*this is the div that i want to have a width relative
  to its height*/
  {
      height: 100%;
      width: 20px;/*i will delete this once .square_set_width is working*/
      position: absolute;
      background-color: red;
  }
  .square_set_width
  {                   
      display: inline-block;
      padding-left: 100%; /*i want to use something like this line to set
  the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
  ratio, but padding-left does not work :( */
      position: relative;
      height: 100%;
      background-color: blue;
  }
  
     &lt;div class='rectangle'&gt;
        &lt;div class='set_rectangle_height'&gt;
           &lt;div class='full_height_div'&gt;
              &lt;div class='square_set_width'&gt;&lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>So, this is what the above incorrect markup looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/aliFy.png" alt="incorrect layout"></p>
  
  <p>And this is what i want it to look like:</p>
  
  <p><img src="https://i.stack.imgur.com/dYeWK.png" alt="correct layout"></p>
  
  <p>I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.</p>