Padding is added to width, is that normal?

jerry2

12-10-2006, 12:22 PM

Hi there

When building my sites I found out that the padding I do on the div id is allways added to the width of the div id. Is that correct?

Example:

#Container {
width:888px;
height:100%;
}

#head-bottom1 {
height: 164px;
width: 190px;
padding:5px 5px;
float:left;
}

#head-bottom2 {
height: 164px;
width: 380px;
padding:5px 5px;
float:left;
text-align:center;
}

#head-bottom2 h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
color:#007ED2;
}

#head-bottom3 {
width:258px;
height: 152px;
float:left;
background-color:#E5B109;
background-image:url(grafika/logo-prehod.gif);
background-repeat:no-repeat;
background-position:0 0;
padding-left:40px;

}

The three div-id's I use to break my head into 3 pieces are all together 888px. But only if you count the left and right paddings also!!! The result is consistent in all browsers...

But from my learnings the padding is INSIDE of DIV. Am I missing something or doing something the wrong way?

Yours

Jerry

croatiankid

12-10-2006, 02:03 PM

Yes it goes like that, when I add padding to something with a specified height or width, I have to make it less wide/tall for it to actually be the same height/width

felgall

12-10-2006, 06:38 PM

Internet Explorer in quirks mode includes the padding in the width (that's why it displays different from all the other browsers.

The current CSS standards say that the padding is added to the width.

The CSS3 standard provides a mechanism for chosing between the two ways.

So currently the width of a div is the space for the content to which you add the padding, the borders, and the margin to get the space that it takes up on the page.

jerry2

12-10-2006, 06:52 PM

Thanx. So I am not doing nothing wrong... But wierd is.. even Internet Explorer seem to show this way (adding to the width).

_Aerospace_Eng_

12-10-2006, 07:43 PM

What doctype are you using?

jerry2

12-11-2006, 07:07 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

_Aerospace_Eng_

12-11-2006, 07:12 PM

Okay that means IE is in standards compliant mode. I think if you looked up the box model you would understand how padding works and what not.