[Solved] Absolute positioned image

[smedz28]

I have an interesting question regarding an image positioned to stay at the bottom of a column in a flexible grid layout. I chose to position the parent container relatively to allow the image within to be positioned absolutely so it’s always at the bottom of the column. is there another way to do this so that the image can be put back in the flow?

The container has a min-width: set with the image positioned at the bottom. There is a paragraph above this which at the moment is small enough to leave space between it and the image, but if I want to write more to that the text will just start to flow behind the image. Ideally I want the image to be part of the flow as well as remain positioned at the bottom which in turn will expand the column when the children expand.

[shaneisme]

Do you have a live example or pen for us to view what you’re trying to do?

[smedz28]

The codepen below shows a 3 column grid, all have varying lengths of text and an image positioned at the bottom of each column. The background colour is part of the styling and a minimum height has been set. At full screen this is fine, when I resize the browser to a viewport width of less than 1170px the text starts to flow behind the image. The only way I can think of changing this is adding a media query specifically for these 3 columns, but at 1170px it seems like it’s a bit too early to add media queries to change the layout? I was kind of hoping that it wouldn’t need a media query until about 980px

What I want to maintain is an equal column height when resizing and the image always positioned at the bottom, symmetry is what I need I suppose……..the images used are about 800 x 533px full size

Any thoughts?

http://codepen.io/smedz28/pen/cHdab

[Ed]

There’s not really any such thing as “too early” to use media queries. Use them when you need to, and use values that make sense for your site’s content. There’s no disadvantage to having a media query at 1170px, if you think that would solve the problem.

[jurotek]

Add sufficient amount of padding-bottom on .sub-content to clear that image

[smedz28]

Thanks very much guys…..jurotek I have applied padding to the bottom of .sub-content as you suggested to lower the breakpoint by a couple of hundred px. I should have seen that one myself because now I think about it the answer should have been obvious since the <p> was flowing behind the img any padding would act as a buffer as the image reduces in size. Is that the right way to look at it?

Ed, I suppose that I was just unhappy with the result that my layout would break so quickly.

I’m still learning and still trying to get away from the thought process of static layouts, some aspects of responsive design are still a mystery to me…….thanks again guys

[Author]

Posts