I recently needed a div banner on a liquid width site to keep its height
proportional to its width - however a quick google search didn't find
anything on the subject.
So, I developed my own technique, based on paddings and absolute
The full write-up is available here:
It's quite a long write-up (my first!), but in summary you have two divs,
#outer and #inner, which are styled as follows:
á = width required
â = height when width is 1 (height/width ratio)
padding-bottom: á * â;
So for a div width 50%, in which you want to keep a height-width ratio of
1:2, you'd have:
I hope this comes in useful for someone.
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt