make margin scale with respect to height rather than width

[wantoo]

http://jsfiddle.net/NykbP/I am trying to make my margin-bottom css properties on \[code\].header\[/code\], \[code\].mainBanner\[/code\], and the \[code\]li\[/code\]s scale relative to the height of the document/window but they are scaling relative to the width of the document/window while the heights of the \[code\]div\[/code\]s are scaling properly...\[code\]height:8%\[/code\]The above scales correctly\[code\]margin-bottom:2%;\[/code\]The above does not.How can I make them scale relative to the height?