Sent by Chris Bell on 18 March 2005 13:01
I posted this question to the CSS creator forum last week and the
general consensus was that there wasn't a robust equivalent and that my
work around --to use one row, two cell table to lay out a header with
the properties I want -- was the only sane way to go.
I'm posting a link to my question to this list server for two reasons:
First, to see if there actually is a robust solution to my problem.
Second, because I suspect someone who reads this on this will either
know or be in a position to suggest that such a property be added to the
next set of CSS standards.
In any event, here is my problem:
I want to create a header for my pages with an image on the left side of
the top of the page and the title (contained in <h1> tags) to its right.
I want the image and title to line up on their bottoms. The title may
have a subtitle, or the title may be too long to fit on one line, and I
want the multi-line titles to continue to line up with the bottom of the
image. I want the layout to be fluid, and I want the user to be able to
change the type size. Yes, I want it all!
I can do this with a simple table but I cannot using CSS. Problems
include: the vertical-alignment property is for inline elements, not
block elements. Styling the <h1> tag as an inline element causes IE to
bug out and doesn't have any effect on Firefox. Using the positioning
properties didn't work for me either, as changing text size or the
number of lines the title takes up (longer title or smaller window)
causes the title to flow below the bottom of the image.
Note that I am NOT asking how to get the bottom of the image to line up
with the bottom of a single line of text (a problem I found has been
discussed in the css-discuss archive but that I have solved on my own .
.. . though you can't tell from the slightly dated test page); I am
asking how to get extra lines of text aligned with the bottom of an
image to flow up rather than down.
Here is a link to the CSS creator thread:
http://www.csscreator.com/css-forum/ftopic8313.html
And to my test page: http://www.boatingbeta.com/test/header_test.htm
Thanks for your indulgence in thinking about this question.
-- Chris Bell
______________________________________________________________________
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/