75% + 25% doesn't make 100% … apparently! CSS issue

Question

I have an image width a width of 75% and a p-box with a width of 25%, but they won't fit in their parent container!

http://jsfiddle.net/bmBnF/4/

Answer 1

I'd try adjusting this a bit:

.flexslider .slides img {
    float: left; /* leave other properties */
}

.flex-caption {
    width: 16%; /* leave others - width is 16% because you have a 2% padding around all sides ( 16 width + 2 left + 2 right */ )
}

Answer 2

The problem is that in CSS width actually means "content width". Padding and borders do not count, so you have to adjust (reduce) your widths to compensate for them.

See updated jsfiddle. Notice that I changed the 20% width to 16% (compensating the 2% margins on each side), and changed 80% to 79% to account for rounding issues.

Note: in newer browsers you can force the use of the "traditional" (Microsoft) box-model for specific elements, then width would mean the full width, including padding and borders. See Cthulhu's answer for an example.

Answer 3

Just add -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; to .flex-caption:

http://jsfiddle.net/Cthulhu/bmBnF/2/

This is the Box Model Bug, you can read about it on wikipedia: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug