Re: [css-d] Maintaining proportions of a div when resizing (A solution)
Leszek Swirski wrote: > http://leszek.swirski.co.uk/proportionaldiv.htm Latest update is looking good - with only one weak point left. All browsers (not just IE/win) need an 'overflow: auto;' on #inner, in order to cope with lots of content on narrow windows. IE/Mac does add a horizontal scrollbar then, which you either will have to ignore of find a fix for. 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)
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/
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: > 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)
#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)
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)
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)
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/
[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/