[css-d] Maintaining proportions of a div when resizing (A solution)
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 PROTECTED]
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/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
#inner { position: absolute; top: 0; bottom: 0; width: 100%;
height: 200%; }
/*\*/ * html #inner {height: 200%;} /**/
And the crazy reason IE/win needs that height in the first place, is
that IE/win can't handle AP for opposite edges of an element.
IE/win can't make inner fill outer in accordance with specs - without a
push.
Now all that's needed is an 'overflow: auto;' on inner, in case it
becomes too small.
IE5Mac needs twice the padding-bottom, e.g. 50% (padding-bottom: 25%;)
in you css-d mail example, 61.8% in your example on your test page
(padding-bottom: 30.9%;)
/*\*/
* html #inner {height: 200%; overflow:auto;}
/*/
#inner {height: 61.8%; }
/**/
Thanks to both of you, I'll update the page. Could you test if it will
always need twice the padding, or if this needs to be multiplied just like
the height did for IE/Win? I'll assume the latter for now.
Like I said with the height though, you don't technically need to hide it
since it'll just calculate 200% of 0, which is still 0. Nevertheless, I
suppose it doesn't hurt to hide it for reasons of clarity.
- Leszek
__
css-discuss [EMAIL PROTECTED]
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/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Your test case actually covers a lot of my screen when I don't hide the 200% from the others. Ingo And that just goes to prove that IE is a cross-platform pain in the arse. Thanks for the testing, I've updated (again): http://leszek.swirski.co.uk/proportionaldiv.htm - Leszek __ css-discuss [EMAIL PROTECTED] 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/
