Height of element defined by percentage of width, implementing the golden ratio in liquid layouts Options

[Joel Gafford]

Layout Design

My plan is to initially divide the screen up horizontally using the golden ratio which is approximately 1.618 to 1.
Then I want to define the height and/or width of other elements (such as margins, collumns, images etc.) based on percentages of the width of the screen.
(The purpose of doing this is to maintain a naturally aesthetic feel throughout the entire document by having all margins, collumns, images, etc. proportional to the original golden rectangle whose width is the width of the screen.)

So far I have only seen div tags that divide based on either fixed pixel value, or width of an element defined by percentage of screen width. (or height of an element defined by percentage of screen height.)

My question is: Is there a way to define the height of an element based on percentage of screen width? (or visa versa)

Thank you!

[pandy]

You'd need JavaScript for that.

Footnote: If you use percent for margins it's always a percentage of the containing block's width, even top and bottom.
http://www.w3.org/TR/CSS21/visudet.html#propdef-width