Aligning div to bottom of parent

Question

I have a div nested inside another div and I want it to be at the bottom of the parent div. I was able to get this to work but there is a small issue. The text in the nested div extends below the parent div. How can I prevent this? Note: This is not extra space below the image. The bottom of the div is not aligning with the bottom of the image.

.imgOverlayTitle {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.imgOverlayDesc {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

<div style="position: relative; display: inline-block;">
    <div class="imgOverlayTitle">Title goes here</div>
    <div class="imgOverlayDesc">Description goes here</div>
    <img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/cat-care/images/HP_PCC_md_0130_cat53.jpg" />
</div>

Possible duplicate of [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — Mohammad Usman, Aug 11 '17 at 07:35
@MohammadUsman I think OP meant that the letters `g` and `p` go past the parent div, and OP doesn't want that, unless I'm wrong — Carl Binalla, Aug 11 '17 at 07:36
@Swellar Once extra space below image will go away, he will get what he wants. — Mohammad Usman, Aug 11 '17 at 07:37
@MohammadUsman There is no extended space below the image. The div's bottom is not aligning with the image's bottom. — Johann, Aug 11 '17 at 07:37
@AndroidDev There is some space. See this [Fiddle](https://jsfiddle.net/77te0quu/) — Mohammad Usman, Aug 11 '17 at 07:39
Add `img {vertical-align: top}` to fix this. [Updated Fiddle](https://jsfiddle.net/77te0quu/1/) — Mohammad Usman, Aug 11 '17 at 07:40
@MohammadUsman You should post that as an answer, but I guess it is really a duplicate — Carl Binalla, Aug 11 '17 at 07:41
I tried removing the inline-block from the suggested posting but that didn't help. Gerard's solution below does work! — Johann, Aug 11 '17 at 07:45

score 3 · Accepted Answer · answered Aug 11 '17 at 07:39

A solution would be to make the container div a flexbox. See below.

.imgOverlayTitle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.imgOverlayDesc {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

<div style="position: relative; display: flex;">
  <div class="imgOverlayTitle">Title goes here</div>
  <div class="imgOverlayDesc">Description goes here</div>
  <img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/cat-care/images/HP_PCC_md_0130_cat53.jpg" />
</div>

That actually works. flex-direction needs to be set to column. Thanks a million! — Johann, Aug 11 '17 at 07:44

Aligning div to bottom of parent

1 Answers1