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>