css - 100% + padding?

Question

As most people know,

a 100% div with a 5px padding is actually 100% + 10px wide.

One obvious solution to this is to wrap the child div in a wrapper that has

Answer 1

You should look into the box-sizing CSS property...

• http://www.w3.org/TR/css3-ui/#box-sizing
• https://developer.mozilla.org/en/CSS/box-sizing

I put together an example to show you how this works and the difference between having the box-sizing property and not having it. Check out the fiddle...

http://jsfiddle.net/UnsungHero97/bKsad/2/

Note that this won't work in IE7 or below :/

I hope this helps.
Hristo

Answer 2

Block elements like <div>s automatically assume a 100% width after padding. I.e. you should be able to achieve the desired effect simply by specifying a padding, leaving the width on auto and making sure the element has display: block (default for <div>).

http://jsfiddle.net/EMYBm/8/