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/
