Sent by Jeremy Amos on 18 March 2005 20:08
On Mar 18, 2005, at 2:33 PM, Donna Casey wrote:
> I often run into this issue for designs where text elements or links
> need to sit at the bottom of a "masthead". I create the masthead as a
> position:relative div, then (depending upon the nature of the text
> elements) set up the heading or another div or whatever using
> position:absolute; height:1.2em; width:n; bottom:n; blah, blah
except that your code only works for a single line of text at
reasonable sizes. Replacing the pipes with <br>, for instance, causes
your example to break out of the bottom of the masthead; the same is
true if you dramatically increase the font size.
One can either set an explicit height for an element, or let the height
of that element be defined by its contents. In either case, when you
set a child element to position: absolute, it's taken out of the flow
of that element (and the document). This means that at the point the
child element's height exceeds that of the parent, it breaks out of the
containing element (since it's no longer in the document flow).
Like the other proposed solutions, the following will *almost* work, in
that it'll keep the text aligned bottom, but the image then breaks out
of the container if the text is shorter than the image (because the
float's taking the image out of the flow):
CSS:
#inner img {
float: left;
margin-top: -Xpx; /* where X is the height of the image */
padding
}
#inner p {
margin-left: -Ypx; /* where Y is the width of the image */
}
Markup:
<div id="inner">
<p>content</p>
<p>more content</p>
....etc...
<img src="..." />
</div>
I still don't see a way to "have it all" as the original poster was
looking for.
J
______________________________________________________________________
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/
