CODEWITHSUNDEEP
htmlcss
Andre Pena
Andre Pena

Reputation: 59336

How to make a percentual width to include the padding? border-box seems not to be working

I want to make a percentage width to include the padding. That is, if my div width is 50% or 500px, it should be 250px regardless of the padding.

Here's the fiddler: https://jsfiddle.net/sxzxbe2t/

As you can see here...

kitty

... the kitty is still 290px wide while it should be 250px. I'm using box-sizing: border-box; to no avail.

Any idea?

EDIT

I need the image to keep being 100% inside the div, unless there's another way for it to occupy the entire width.

Upvotes: 1

Views: 37

Answers (1)

The Process
The Process

Reputation: 5953

Seems like you still have to add vendor prefixes Fiddle

.container .image-wrapper {
    width: 50%;
    padding: 0 20px; 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;    
    box-sizing: border-box;  // this makes no difference
}

Upvotes: 1

Related Questions