<div style="position: relative;> <!-- I'm the parent -->
blah blah blah
<div style="position: absolute; bottom: 0;> <!-- I'm the child -->
blah blah blah
</div>
</div>
The bottom of the child div lines up with the bottom of the parent div
in Win IE6 and in Win NS6. However, Mac IE5 has a nasty bug -- it lines
up the bottom of the child div with the *top of the body* -- I kid you
not -- in other words, it shoves the child div completely off the top
of the screen!
(BTW, Mac IE5 is the most recent version for the Mac and is still used
by millions of people, especially the roughly 50% of Mac users who
haven't switched to OSX.)
I tried assigning various properties to the html and body themselves --
100% height, relative positioning, absolute positioning, in various
combinations -- nothing helped.
After <self-pity>much</self-pity> experimental time, I came up with a
slightly ugly workaround:
<div style="position: relative;> <!-- I'm the parent -->
blah blah blah
<div style="position: absolute; /*I'm the child*/
height: 130px;
top: 100%;
margin-top: -130px;>
blah blah blah
</div>
</div>
What's happening here is that the top:100% is shoving the child down
until it's just *below* the parent, and then the negative margin-top is
pulling it back up again (by an amount equal to its own height) so that
the bottom of the child is lined up with the bottom of the parent --
which is what I was trying to accomplish in the first place.
BTW, you may safely assume that the parent div is at least a few
hundred pixels tall. Actually the child's negative margin-top needs to
be slightly *more* than its own height (to compensate for child's
margins etc.), but I wanted to keep the code clear here.
This works in Win IE5.01/5.5/6, Win NS6, and in the villain of this
little episode, Mac IE5. The workaround is nasty because it requires
me to specify in advance the height of the child div (which I'd rather
not do) since the negative margin-top needs to be based on that height.
I tried a slightly simpler version, with top: 95% and no negative top
margin -- but then the child kept shifting its vertical position
depending on the height of the parent div, so I had to keep changing
the percentage. In this case it's easier to predict/specify the height
for the child than the parent, but of course neither way is very nice
-- I'd rather not predict/specify any fixed heights.
If anybody knows of a better way to get Mac IE5 to behave itself with
respect to a simple bottom: 0 absolute position, I'd love to hear it.
Also, if there are any gotchas with this workaround that haven't
occurred to me, I'd like to hear that too.
Thanks.
