Menu icon Foundation
Positioning an image within grid (equal height columns)

Hi there!

I was wondering if you could help me out with something. Simply put, I have two columns side-by-side—one with a bunch of text and one with an image. When the text is larger than the image, I am trying to get the image to position itself relative to the bottom of the text column.

In theory I could not put the image in a column and use positioning but I want the image to be responsive and resize relative to the grid. I haven’t had any success trying to position the image within the column or even the column itself. I’ve also tried a few jQuery solutions (making the columns equal heights) but nothing that seems to work well when the browser resizes.

To help clarify what I’m trying to achieve, I’ve attached a graphic to demonstrate. Any ideas of what I can do to get what I’m looking for? If it helps, I’ve whipped up a simple example of what I have in my graphic here: http://jsfiddle.net/9gsGw/

Any help would be extremely helpful! Thanks in advance.

Cheers,

Adam

Imagedisplayzsupport  3

imgimagegridlayout

Hi there!

I was wondering if you could help me out with something. Simply put, I have two columns side-by-side—one with a bunch of text and one with an image. When the text is larger than the image, I am trying to get the image to position itself relative to the bottom of the text column.

In theory I could not put the image in a column and use positioning but I want the image to be responsive and resize relative to the grid. I haven’t had any success trying to position the image within the column or even the column itself. I’ve also tried a few jQuery solutions (making the columns equal heights) but nothing that seems to work well when the browser resizes.

To help clarify what I’m trying to achieve, I’ve attached a graphic to demonstrate. Any ideas of what I can do to get what I’m looking for? If it helps, I’ve whipped up a simple example of what I have in my graphic here: http://jsfiddle.net/9gsGw/

Any help would be extremely helpful! Thanks in advance.

Cheers,

Adam

Imagedisplayzsupport  3
Rafi Benkual over 5 years ago

Right now the only way I know to do this is by using JavaScript. This is a heavily requested feature that is being added soon for 5.1. Here is the milestone with code: https://github.com/zurb/foundation/issues/3950

I made a codepen http://cdpn.io/bFnLz with your code and played around with panels to make it work on large screens. When you shrink it down though, the text bleeds out of the fixed height panel. So you will need the JS option we are building. You can use it now if you like.

Brandon Arnold over 5 years ago

I used some sweet translate properties to create this effect without worrying about equal height columns. The beauty of translate is that it's percentages are based on the size of the object they're applied to and sicne the images are 100% the width of the column, it resizes perfectly. You may want to put my sass in a media-query for medium-up, so on mobile it just goes to the bottom.

Enjoy

http://cdpn.io/HzGfB

Rias Van der Veken over 5 years ago

This is what I managed to do: http://jsfiddle.net/f8FL6/

Julien Cabanès over 5 years ago

3 different options :

1° display: table-cell : it resets the floats and use vertical-align: middle http://jsfiddle.net/Hv2Fq/1/
2° position: absolute + transform : the same as Brandon http://jsfiddle.net/Hv2Fq/2/
3° position: absolute + bottom : the same as Rias http://jsfiddle.net/Hv2Fq/3/

The first is the only one who preserves fluid images (max-width: 100%)

Enjoy

Babache04 over 5 years ago

A works code here : http://jsfiddle.net/26z2x/1/

You just required position: relative; and height for your colums and a position absolute; on your element wish must be at bottom.

Enjoy!

Kevin Neal over 3 years ago

Hi I know this is an old post, but is there now a better way to achieve this?

John Crumpton over 3 years ago

https://css-tricks.com/snippets/css/a-guide-to-flexbox/