Padding adding to OUTSIDE of Div

I’m trying to give a div padding, but when I add the padding: 5px; to the #main div, it adds the padding outside (acts like a margin). How do I get it inside the div?

body {
  margin-left: 103px;
  margin-right: auto;
  width: 50em;
  background: url("images/background.gif") repeat;

}
#top {
  position: absolute;
  height: 121px;
  width: 547px;
  top:50px;
  border:0px none;
  background: url("images/flammula_01.gif") top center no-repeat;

}
#left {
  position: absolute;
  height:100%;
  padding:0%;
  top: 190px;
  left:637px;
  border:0px none;
  Z-index:3;
}
#main {
  position: absolute;
  width:547px;
  top:171px;
  border:0px none;
  background: url("images/flammula_12.gif") bottom center no-repeat;
  background-color: white;
  padding: 5px;

}


Hi,

 #main {
      position: absolute;
      width:547px;
      top:171px;
      border:0px none;
      background: url("images/flammula_12.gif") bottom center no-repeat;
      background-color: white[color=Red][b];[/b][/color] /* you forgot to close element */
      padding: 5px;
    
    }

Thanks! I gave it a go but it still doesn’t work. It looks like I posted wrong (I was sure I put that semicolon there, lol!)
The padding is still added to the outside of the div rather than to the inside.

Hello,

I think what you mean is that your div gets larger in width, right?

Padding adds to the width. So if your main div is 547px wide and you have a padding of 5px, it’s 557px wide. I assume this is your problem. So, if you want your container to only be 547px wide, you would use 537px for your main div and keep the 5px padding rule and thus have a main div width of 447px.

Ahhh, thanks! That worked. Sorry, I’m still new at this CSS thing. :lol:

Good that I could be of help. :slight_smile:

I had a typo in my post that I’ve corrected (547px+ 5px padding = 557px) but you figured it out nonetheless. :slight_smile: