Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Padding is added to width, is that normal?

    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

  • #2
    Regular Coder croatiankid's Avatar
    Join Date
    Jan 2006
    Posts
    665
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx. So I am not doing nothing wrong... But wierd is.. even Internet Explorer seem to show this way (adding to the width).

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What doctype are you using?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Jun 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •