-2

I know this question has been asked a number of times but I keep seeing the answer for using...

postion: absolute;
bottom: 0;

However, it doesn't really work in my case, so was looking for other suggestions.

And answers for using flex don't seem to work because of my column layout. I am also pretty knew to flex so I don't know it awfully well.

I have an image on the left that has a set width of 145px, but can differ in height.

On the right, I have a div that contains 2 divs (TimelineAddress & TimelineFavouriteUser) with spans inside each one. One for property address and another with a user name and some text appended. I would like the div TimelineFavouriteUser to sit at the bottom so it is inline with the bottom of the image. See diagram below.

 ----------- ----------------------------
|Image      | Address - Dynamic Length   |
|Can be     |                            |
|different  |                            |
|heights    |                            |
|           |                            |
|           |                            |
|           |                            |
|           |                            |
|           | User and text at bottom    |
 ----------- ----------------------------

This can be achieved by using 

postion: absolute;
bottom: 0;

However, when it comes to responsiveness and lower resolutions the address can overlap the text at the bottom as the address text breaks into more an and more lines. See image below.

enter image description here

I have used some javascript to dynamically add the correct margin-top to TimelineFavouriteUser, although, I'd prefer a CSS only solution as the function that runs the calculation for margin-top value gets called a lot as there could be 100's of these elements on the screen.

I know this may be possible with flex, however, we need to support at least IE9 so if there was a solution for IE9, that would be great.

If not then I can perhaps come up with a solution for browsers where flex is not supported if flex is the best solution.

I have a JSFiddle if you'd like to test it out for yourself.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
mcclosa
  • 943
  • 7
  • 29
  • 59
  • Hey here is one that is doing almost the same thing. wont work in IE9 without javascript though - https://stackoverflow.com/questions/56475464/prevent-image-from-expanding-beyond-other-elements-of-flex-row – Andrew Jun 06 '19 at 11:20
  • 1
    Try using css grid. Oops IE9 – Itang Sanjana Jun 06 '19 at 11:21
  • If you dont want to use position: absolute than you can try to use vertical-align: bottom. you can try to refer the answer in this thread. https://stackoverflow.com/questions/26124865/position-div-to-bottom-of-a-different-div-without-using-absolute/26125052 – Deepak-MSFT Jun 06 '19 at 15:25

3 Answers3

0

I would recommend you a polyfill for the flexbox maybe something like: https://github.com/jonathantneal/flexibility

otherwise you would have to fiddle around with display:table, floats and hardcoded pixel values

Shouldz
  • 58
  • 6
-1

You can use flex for the same 

align-items:flex-end;

here's a fiddle https://jsfiddle.net/karantewari/pw4hsqry/

Karan Tewari
  • 498
  • 8
  • 20
-1

Untested. With CSS vendor prefix.

div {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
      grid-template-columns: 1fr 2fr;
  -ms-grid-rows: 2fr 1fr;
      grid-template-rows: 2fr 1fr;
  height: calc(100vh - 1rem);
  width: 100%;
}

section {
  background-color: lightpink;
}

section:first-child {
  background-color: lightblue;
  -ms-grid-row-span: 2;
      grid-row-end: span 2;
}

section:last-child {
  background-color: lightgreen;
}
<div>
  <section>X</section>
  <section>y</section>
  <section>z</section>
</div>
Itang Sanjana
  • 649
  • 5
  • 8