CODEWITHSUNDEEP
csspercentage
Mads K
Mads K

Reputation: 837

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

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/

Upvotes: 1

Views: 2351

Answers (3)

bfavaretto
bfavaretto

Reputation: 71939

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.

Upvotes: 5

mikevoermans
mikevoermans

Reputation: 4007

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 */ )
}

Upvotes: 2

Cthulhu
Cthulhu

Reputation: 5235

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

Upvotes: 2

Related Questions