css positioning question

Question

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 ;)

a picture of what you're hoping to obtain would be very helpful. — Dave
– Dave, Commented May 6, 2011 at 22:03

ariel · Accepted Answer · 2011-05-06 23:43:34Z

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

edited May 6, 2011 at 23:43

answered May 6, 2011 at 22:02

ariel

16.2k13 gold badges65 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Dave Over a year ago

Wow - props for figuring out what he was talking about! :)

ariel Over a year ago

Dave.. i haven't.. just a wild guess ;)

Rudie Over a year ago

The vertical-align in your example does nothing. This is the standard location for text <> inline blocks. vertical-align only works in tables. See phrogz.net/css/vertical-align/index.html

clairesuzy Over a year ago

@Rudie 'tis not true, vertical align works well with inline-blocks too.. see this fiddle you can change the vertical alignment to middle or top and the text will move accordingly

ariel Over a year ago

@nickpish you have to set display:inline-block . updated my code jsfiddle.net/X4CeC

|

Collectives™ on Stack Overflow

css positioning question

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related