SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 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? ...)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,656
    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
  •