Padding causes div to expand beyond parent

Any idea why the .story-text expands beyond the bounds of the container? I don't want to set overflow: hidden because it doesn't solve the issue that the padding is causing it to expand beyond the bounds (and the text would be flush up against the right edge of the container). Why isn't .story-text staying within the bounds of its parent and how do I get it to behave properly?

Fiddle: http://jsfiddle.net/csaltyj/yFpMH/

HTML:

<div id="story-container">
    <div class="story">
        <img src="http://www.westernjournalism.com/wp-content/uploads/2011/04/Barack-Obama-There-Might-Be-Chances-of-Further-Offshore-Drilling-Campaigns.jpg" />
        <div class="story-text">
            <h4>Obama is pointing at you!</h4>
            <p>It is this very gaze, and this very pointed finger, that actually killed Osama bin Laden.</p>
        </div>
    </div>
    <di开发者_C百科v class="story">
        <img src="http://reason.com/assets/mc/jtaylor/rahm.jpg" />
    </div>
</div>

CSS:

#story-container {
    margin-top: 2em;
    width: 300px;
    height: 200px;
    border: 1px solid #999;
    position: relative;
}

.story {
    position: absolute;
}

.story img {
    width: 100%;
    height: 100%;
}

.story-text {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    position: absolute;
    /*top: 130px;*/
    bottom: 0;
    height: 45px;
    width: 100%;
    padding: 10px;
}

.story p {
    font-size: 0.7em;
}

If you take out the width declaration for .story-text that should fix it.

Set the width of story text to 280px or just the container width - padding left - padding right. Demo here http://jsfiddle.net/yFpMH/6/