CODEWITHSUNDEEP
css
CaptSaltyJack
CaptSaltyJack

Reputation: 16085

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>
    <div 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;
}

Upvotes: 2

Views: 8343

Answers (2)

raeq
raeq

Reputation: 971

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

Upvotes: 2

user734709
user734709

Reputation:

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

Upvotes: 3

Related Questions