set div width as a percentage of height

[warNasystak]

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.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 here for an explanation fo this method.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.here is my failed attempt:\[code\].rectangle{ position: relative; width: 30%; display:inline-block; background-color: green;}.set_rectangle_height{ padding-bottom: 30%;/*ratio*/ position: relative; float: left; width: 100%; height: 100%;}.full_height_div{ height: 100%; width: 20px;/*will be deleted once .square_set_width is working*/ position: absolute; background-color: red;}.square_set_width{ display: inline-block; padding-left: 100%;/*this should make the blue div square, but it does not */ position: relative; height: 100%; background-color: blue;} <div class='rectangle'> <div class='set_rectangle_height'> <div class='full_height_div'> <div class='square_set_width'></div> </div> </div> </div>\[/code\]I know I could find and set the percentage height in javascript, but it would be really handy if there is a pure css fix for what I am trying to do. I will be doing this a lot and I don't really want to go writing code to resize all the divs on my page.