[thelist] Aligning an image to the bottom of multiple lines of text in CSS

Roger Ly evolt at matchpenalty.com
Mon Oct 18 18:49:01 CDT 2004

Hey all,

Any thoughts on how to accomplish the following with CSS and no tables?


|  |
|  |
|  | this is some text
|  | that is aligned to
|  | the bottom of an image.
---- how to do this?



There is an image on the left, which is vertically aligned to the bottom
of the multi-line text on its right.  Directly underneath both, is a
link which is aligned to the left of the image.  Both the image and the
link need to be hyperlinked.

I can't seem to get any good alignment going.

The best thing I could come up with was something like this:

<div style="background-image: url(http://url.to.image);
background-position: bottom left; background-repeat: no-repeat;">	
	<!-- the padding should be the width of the image plus some
padding pixels !-->
	<div style="padding-left: 150px; ">
		blah blah blah<br />
		blah blah blah<br />
		blah blah blah<br />
		blah blah blah<br />
		blah blah blah<br />
<div><a href="http://www.mydomain.com">www.homestead.com</a></div>

But I don't know how I'd get the image to be hyperlinked.

Any ideas?



More information about the thelist mailing list