How to properly overlap text over an image

Question

I'm having a bit of trouble having my text display only within my image. It's dependent on the length of the text, if it's two rows long, then it'll display correct. Any longer it'll extend past the image. I can fix this by setting the bottom: 25px; for my featured_wrapper but I don't think that's a Good fix. If the text is only 2 rows long then that it sets the text higher than it should. May I ask how should I properly set the text so that it'll always remain within the image.

<div id="featured_item">
  <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
    <picture id="featured_picture">
      <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
    </picture>
    <div id="featured_wrapper">
      <h3 id="featured_title">
        A Beginners Guide To Getting Six Pack Abs ... add in some more text
      </h3>
    </div>
  </a>
</div>

http://codepen.io/anon/pen/eZVdpq

Answer 1

Change the height to auto in your #featured_wrapper rule

#featured_wrapper {
    bottom: -2px;
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    height: auto;                 /*  <---  changed to auto  */

#featured_item {
    box-sizing: border-box;
    color: rgb(34, 34, 34);
    height: 173.813px;
    min-height: auto;
    min-width: auto;
    overflow-wrap: break-word;
    position: relative;
    width: 309.297px;
    word-wrap: break-word;
    perspective-origin: 154.641px 86.9063px;
    transform-origin: 154.641px 86.9063px;
    border: 0px none rgb(34, 34, 34);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    margin: 0px 21px 0px 0px;
    outline: rgb(34, 34, 34) none 0px;
}

#featured_link {
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    display: block;
    height: 173.813px;
    overflow-wrap: break-word;
    text-decoration: none;
    width: 309.297px;
    word-wrap: break-word;
    perspective-origin: 154.641px 86.9063px;
    transform-origin: 154.641px 86.9063px;
    background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
    padding: 0px 0px 173.813px;
}

#featured_picture {
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    word-wrap: break-word;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
}

#featured_image {
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    display: inline-block;
    height: 173.969px;
    max-width: 100%;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
    vertical-align: middle;
    width: 309.297px;
    word-wrap: break-word;
    perspective-origin: 154.641px 86.9844px;
    transform-origin: 154.641px 86.9844px;
    background: rgb(245, 245, 245) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
    overflow: hidden;
}

#featured_wrapper {
    bottom: -2px;
    box-sizing: border-box;
    color: rgb(40, 173, 230);
    height: auto;
    left: 0px;
    overflow-wrap: break-word;
    position: absolute;
    right: 20px;
    width: 289.297px;
    word-wrap: break-word;
    perspective-origin: 144.641px 45px;
    transform-origin: 104.641px 45px;
    border: 0px none rgb(40, 173, 230);
    font: normal normal normal normal 16px / 24px ProximaNovaCond, sans-serif;
    outline: rgb(40, 173, 230) none 0px;
}

#featured_title {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: inline;
    height: auto;
    overflow-wrap: break-word;
    position: relative;
    text-rendering: optimizeLegibility;
    width: auto;
    word-wrap: break-word;
    background: rgba(0, 0, 0, 0.701961) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    font: normal normal normal normal 22px / 22px ProximaNovaCond, sans-serif;
    margin: 0px 0px 0px;
    outline: rgb(255, 255, 255) none 0px;
    padding: 0px 10px;
    transition: all 0.1s ease-in-out 0s;
}

<div id="featured_item">
  <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
    <picture id="featured_picture">
      <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
    </picture>
    <div id="featured_wrapper">
      <h3 id="featured_title">
        A Beginners Guide To Getting Six Pack Abs ... add in some more text
      </h3>
    </div>
  </a>
</div>

And I don't think you need all that CSS/markup either, so here is a shortened version for you.

#featured_item {
    position: relative;
    width: 309.297px;
    margin: 0px 21px 0px 0px;
}

#featured_link {
    display: block;
    position: relative;
    text-decoration: none;
}

#featured_image {
    max-width: 100%;
}

#featured_title {
    color: rgb(255, 255, 255);
    height: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-rendering: optimizeLegibility;
    background: rgba(0, 0, 0, 0.701961);
    font: normal 22px / 22px ProximaNovaCond, sans-serif;
    padding: 0px 10px;
    transition: all 0.1s ease-in-out 0s;
}

<div id="featured_item">
  <a href="http://bandwagonbible.com/Fitness/GettingSixPackAbs" id="featured_link">
    <img src="http://bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" id="featured_image" alt='' />
    <div id="featured_title">
      A Beginners Guide To Getting Six Pack Abs ... add in some more text
    </div>
  </a>
</div>

Answer 2

Remove the height: 50px; in the #featured_wrapper rule and also change the bottom:2px; to 0 to make it be stick to the bottom.

Like this

I also change the display:inline of the text and add a width:100% to make the text adapt the full width of the image.