SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why Does Adding Padding to a div Mean It Exceeds Its Fixed Width?

    Hi Guys

    See:

    http://www.highlycreative.co.uk/test...uts/test11.htm

    I added:

    padding: 5px;

    To the green header div, and now you can see that it exceeds its fixed width designation of 960px. Surely padding shouldn't push out the fixed width? What is the correct way to pad instead?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    padding and margin are added to the overall width. To avoid having to change with width setting every time you adjust padding/margin, it's easier to have an inner div on which you place the padding/margin. You just don't set a width on that inner div, in which case it just absorbs the padding/margin.

    Really, though, in a situation like the one on that page, it never looks very good (to me, at lest) to have a background color on that content div. So it's a problem you can do without. (And I presume pink on green is for testing porpoises only? Surely? ...)

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ... and yes the colours are just for testing purposes.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Or you can use css3 box-sizing: border-box;. The width then will not exceed what you stated


Bookmarks

Posting Permissions

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