5

how can I modify these divs so that when I change their padding, their height and width do not expand? I have tried to implement 

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

from here

by giving the parent divs fixed_width and relative_container width:700px;height:100px; padding:0px;, but when I apply padding to .content or .obscure, the divs expand to cover .extra_margins below. Thanks!

http://jsfiddle.net/loren_hibbard/ZmJ9R/

Community
  • 1
  • 1
1252748
  • 14,597
  • 32
  • 109
  • 229

1 Answers1

10

You can use CSS3 box-sizing property to do this:

box-sizing: border-box;

http://css-tricks.com/box-sizing/

Supported in IE8+ but some browsers may require a prefix:

http://caniuse.com/css3-boxsizing

Kevin Boucher
  • 16,426
  • 3
  • 48
  • 55
  • yeah, i would like to use it without css3 if possible. just for support reasons... Doesn't the link I used indicate that it is possible without css3 somehow? Thanks! – 1252748 Nov 06 '12 at 16:35
  • 1
    excellent answer, apparently i've been doing this wrong for a long time. and that compatibility chart is perfectly reasonable.\ – Rodik Nov 06 '12 at 16:36
  • yeah, true. that compatibility chart is not terrible at all. Thanks! – 1252748 Nov 06 '12 at 16:37
  • 1
    box-sizing is implemented in every modern browser as low as IE8 (doesn't work in IE7). It may be referred to as CSS3 - but it's actually really well supported. Just make sure you add the prefixes – Adam Jenkins Nov 06 '12 at 16:37