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:
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
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.
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
#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
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
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
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):
