0

I'm trying for the life of me to figure out what should be an excruciatingly simple CSS task: aligning a block of text to the right of an image and vertically positioning the block so it aligns with the bottom of the image; and I'd prefer to not have to declare a height for the containing element as this is for a lengthy image listing and the dimensions will vary (but all with a certain max width/height). I've attempted to define a parent element with "position:relative" containing two left-floated divs, one with the image and the other with the text block, positioned "absolute" and "bottom:0" and I can't seem to get the text block to align with the bottom of the image...

any assistance here may very well help me stave off a fit of insanity ;)

nickpish
  • 839
  • 4
  • 24
  • 43

1 Answers1

5

If the text go to the right of the image, just use an element with display:inline-block after the image, and enclose everything in a block (like div). See it here

ariel
  • 15,620
  • 12
  • 61
  • 73
  • Wow - props for figuring out what he was talking about! :) – Dave May 06 '11 at 22:05
  • Dave.. i haven't.. just a wild guess ;) – ariel May 06 '11 at 22:10
  • The `vertical-align` in your example does nothing. This is the standard location for text <> inline blocks. `vertical-align` only works in tables. See http://phrogz.net/css/vertical-align/index.html – Rudie May 06 '11 at 22:11
  • 2
    @Rudie 'tis not true, vertical align works well with inline-blocks too.. see this [**fiddle**](http://jsfiddle.net/clairesuzy/WjBzP/) you can change the vertical alignment to middle or top and the text will move accordingly – clairesuzy May 06 '11 at 22:29
  • hey sorry if I wasn't clear guys, think I was delirious from staring at the screen too long, ha; [here](http://imageshack.us/photo/my-images/703/alignbottom.png/) is an image depicting the desired effect; thanks for the feedback thus far! – nickpish May 06 '11 at 22:53
  • and a pure css solution is preferable, but help via js would work too – nickpish May 06 '11 at 22:54
  • @nickpish then my answer should do it for you – ariel May 06 '11 at 23:01
  • @clairesuzy That's very cool. Well, maybe not very cool, but I didn't know it =) – Rudie May 06 '11 at 23:10
  • 1
    @nickpish you have to set display:inline-block . updated my code http://jsfiddle.net/X4CeC/ – ariel May 06 '11 at 23:44
  • thanks much guys; the "inline-block" property was the missing piece of the puzzle; now I can move on with my life :) – nickpish May 06 '11 at 23:44
  • that jsfiddle site is fantastic btw-- haven't used it before – nickpish May 06 '11 at 23:46
  • just thought I'd note that this method does not work in IE7 (shocking); the text-block gets pushed beneath the image – nickpish May 07 '11 at 00:11
  • @nickpish it will work in IE7 if you use a span for the text, or if you hack the `p` element - see my updated [**fiddle**](http://jsfiddle.net/clairesuzy/WjBzP/) showing both inline and block level with an IE7 hack.. you can feed the `display: inline` rule via a conditional comment if you don't like the hack. – clairesuzy May 07 '11 at 06:19
  • this is great, thanks clairesuzy. another question, as I present [here](http://stackoverflow.com/questions/5918926/css-js-vertically-aligning-text-block-alongside-an-image), is how to vertically align the block of text next to the image without having to declare a height for the containing block-- which seems to open up a whole other can of worms. This is something very easily achieved with tables-- in fact, it's the default behavior-- but seems (absurdly) to be a herculean effort with straight css. If you have any suggestions on that front as well, I'd be most appreciative. – nickpish May 08 '11 at 05:06