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/

Reply via email to