15

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?

Hailwood
  • 89,623
  • 107
  • 270
  • 423
  • if you use `padding-left` and `padding-top` and `padding-bottom`? this is that the result you want? or you can look into http://stackoverflow.com/questions/5219175/width-100-padding – jotapdiez Apr 26 '11 at 03:15

2 Answers2

20

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/

deceze
  • 510,633
  • 85
  • 743
  • 889
  • Well, ok, bad example on my part, lets assume its not a div, instead it is an html input... – Hailwood Apr 26 '11 at 03:40
  • @Hailwood That's quite an important detail to omit. :-P In that case you have little choice but to use a wrapper (if you care about IE). – deceze Apr 26 '11 at 05:04
12

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

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

Hristo
  • 45,559
  • 65
  • 163
  • 230
  • or not :) my recommendation is to use `box-sizing` for everything besides IE7 and below but for IE7 and below, use conditional stylesheets with the extra markup. for more info on conditional stylesheets, check out this question http://stackoverflow.com/q/3193435/196921 – Hristo Apr 26 '11 at 04:41
  • out of curiosity, if you can do conditional stylesheets, you could technically do conditional markup, but, is this any more efficient than actually just using the un-styled markup? – Hailwood Apr 26 '11 at 20:27