Sent by Leszek Swirski on 15 January 2006 18:06
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
positioning.
The full write-up is available here:
http://leszek.swirski.co.uk/proportionaldiv.htm
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)
#outer {
height: 0;
width: á;
padding-bottom: á * â;
position: relative;
}
#inner {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 1/á;
}
So for a div width 50%, in which you want to keep a height-width ratio of
1:2, you'd have:
#outer {
height: 0;
width: 50%;
padding-bottom: 25%;
position: relative;
}
#inner {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 200%;
}
I hope this comes in useful for someone.
- Leszek
http://leszek.swirski.co.uk
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt
