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 a 10px margin however this method requires you to add extra markup, I am looking for a way to do 100%+padding without the extra div.

any ideas?

Answer 1

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/

Answer 2

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