Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Leszek Swirski wrote:
I recently needed a div banner on a liquid width site to keep its height
proportional to its width ...
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%;
}
Leszek,
thanks for the interesting method.
I think you'll have to hide this IE/Win specific height of #inner from
the others.
/*\*/
* html #inner {height: 200%;}
/**/
Regards,
Ingo
--
http://www.satzansatz.de/css.html
__
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)
Ingo Chao wrote:
Leszek Swirski wrote:
#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.
regards
Georg
--
http://www.gunlaug.no
__
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)
Gunlaug Sørtun wrote:
Ingo Chao wrote:
Leszek Swirski wrote:
#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.
regards
Georg
Thanks, Georg :)
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%; }
/**/
Ingo
--
http://www.satzansatz.de/css.html
__
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)
Leszek Swirski wrote: 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. Your test case actually covers a lot of my screen when I don't hide the 200% from the others. Ingo -- http://www.satzansatz.de/css.html __ 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/
Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Leszek Swirski wrote: 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 Screenshot offlist. You really need to delete height: 200% and serve it to IE/win only. And IE/Mac needs a /height/ of 68.1%, not a padding-bottom of 68.1% in #inner. Ingo. -- http://www.satzansatz.de/css.html __ 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/
