box containing image adapting to height (img always at the bottom)

[lorem]

Hi there,

I got a box that stretches vertically according to the height of a child div, the image should always stay at the bottom of the container e.g.: http://jsfiddle.net/wz3UM/9/

is there a way to keep the minimum height of the container box according to the image within and not to overflow? http://jsfiddle.net/wz3UM/8/

thanks a lot, cheers

[Paulie_D]

I don’t see how you can affect the height of the parent when the absolutely positioned image is taken out of the flow.

JS/JQ solution required I suspect.

[lorem]

thanks Paulie,

… just wanted to make sure I don’t miss anything CSSwise before I resort to JS ;)

[Paulie_D]

Unless there is something one could experiment with display:table or display:table-cell.

Hmm…that’s got me thinking.

[Paulie_D]

OK…not entirely sure why this works but it seems to.

It does require some change in the way the HTML is structured but there is NO absolute positioning involved.

http://codepen.io/Paulie-D/pen/HExLw

[lorem]

wow, awesome – very nice! thanks

[Paulie_D]

The only think I would say is that I don’t know why this works (or rather I thin I do but I’m not sure I got it right)…I knocked it out in a few minutes so it’s entirely possible that it may not be suitable in all situations AND that it will break at the slightest breath.

Caveat developor :)

[lorem]

got one situation where it won’t work …if the text should be on top of the image. going to fiddle around some more

[Paulie_D]

Ah…that wasn’t in the original spec.

If you are trying to flow text around the image that’s at the bottom that’s a whole other ballgame.

[lorem]

sorry that I was unclear. I meant the box with the text should be on top, not flowing around (http://jsfiddle.net/wz3UM/15/)

[Paulie_D]

Ugh…unless you have a very specific image in mind I would have to say that’s going to provide a poor user experience (UX).

Assuming the image(is) is/are NOT content (if they are, IMO you shouldn’t really be overlaying text) then it makes more sense to use a background image…that’s much easier to position.

[lorem]

had this scenario in mind […]
with the background image, the container would’t automatically stretch

[Paulie_D]

Not sure I follow….if the container doesn’t have any contents then it doesn’t need to stretch.

If you need the image to be shown in full, the set a min-height on the container. Is it your thought that this image would, in some way be changing regularly?

[lorem]

“Is it your thought that this image would, in some way be changing regularly?”

yes, different versions of this kind of setup

[Author]

Posts