Sent by W. Joseph Bolte on 28 November 2005 19:07
Hi,
I see a lot of posts here about aligning text with the bottom of its
parent div, whose height is specified in pixels, regardless of how
the text is re-sized. I have a similar, but much harder question.
What if you want to align the bottom of the the text with the bottom
of a constant-height div, but the text is outside the div in the html
source?
For the desired layout, please see <http://joebolte.com>. This
example has the menu of pages inside the div whose background is the
cloud image, and uses "position: absolute; bottom: 0;" to achieve the
desired layout. If you are having the problem I described in the
first sentence of this mail, look at the CSS of this page for the
answer.
My problem is that, to allow other designers to customize the CSS to
move the list somewhere else in the page, and to make the html
strictly semantic, I would like to have the same layout, with the
<ul> just under, but outside of the header div. I have prepared a
test case, which you can view here: <http://joebolte.com/testcase/>
Please note that the stylesheet has lots of comments from different
guesses. Just ignore them. And I can fix the horizontal issues, it's
that way so you can compare the bottom edge of the header and the menu.
The problem is that the height of the page menu is 11px + plus the
height of the text inside which of course the user can change. No
single value specified for either absolute or relative position keeps
the menu at the bottom of the div, but prevents the menu from growing
outside the header div as the text size is increased.
if anyone can solve this problem, I would be more than happy to write
up How-To for it and post it on the css-d wiki.
Cheers,
Joe
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
