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/