percentage width with percentage padding

I have the layout here: http://jsfiddle.net/chricholson/susXf/11/

In Chro开发者_高级运维me and Firefox you'll notice there is a 1 pixel gap between the edge of the red box and the image. In IE 8, this isn't there (as expected).

This does not happen if I specify the width and padding using pixels.

My guess, although I cannot be sure, is due to the calculations of percentages and how numbers are rounded. The 6% for the padding works out to be 20.94px, the width of the p works out as 328.06. Assuming both are rounded down (despite the fact the first should be rounded up), then the total width is 348px, which seems to be the cause of the problem. IE is maybe more intelligent and rounds up correctly?

Nevertheless, has anyone else come across the same situation and found a fix?

The error is actually caused because of your parent element. You have the width set at 349px. Some browsers, depending on available screen space, will round up or down by default.

It's generally a good practice to use nice widths when using percentages.

Solution: http://jsfiddle.net/vonkly/susXf/29/

This solution allows for an unset, arbitrary image width to define the wrapping element's width and thus, the child span and <p> widths. This achieves the goal of the OP on the fly, without having to manually enter custom classes or width declarations.

CSS

img {
    width: 100%;
    max-width: 100%;
}
.videoThumb {
    position: relative;
    display: inline-block;
    padding: 0;
}

.videoThumb .details {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #000;
    background-color: red;
}
.details p {
    display: block;
    padding: 14px 4%;
    margin: 0;
}

HTML

<div class="videoThumb">
    <img src="http://www.chainreactiondisco.com/images/disco_panel_02_01.jpg">
    <span class="details">
        <p><!-- containing element for black box -->
            Watch<br />
            Signature Manager vs. Mail Dislcaimers
        </p>
    <span><!-- /details -->
</div><!-- /videoThumb -->

NOTE

If you are planning on using any <p> tags inside span.details, I'd suggest changing your css a bit. All you need to do is change .details p {} to .details span {}. Then go to your HTML and change the <p> tags to <span> tags.