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 3 of 3

Thread: DIV padding

  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    DIV padding

    I have a pixel-perfect layout; it was previously achieved with IFRAMEs but I am now moving the contents of each IFRAME into the main document. Previously, the IFRAME body panel had a padding of 5px, which was the result I wanted.

    Now I've got a DIV representing the IFRAME, yet I can't set a padding on it because it makes the DIV bigger by the padding specified (go figure). I try nesting a DIV inside the document DIV, and setting either a padding or a margin of 5px on that, and again, the outer DIV expands. How do I achieve a DIV with an inner padding of 5px, whilst keeping the width specified?

    Sorry if my post is a little hard to understand, but I've spent a ridiculous amount of time on a seemingly small and simple task and it's taking a lot just to stop me from swearing every second word.
    Last edited by name _F1; 07-11-2007 at 07:10 AM.

  • #2
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    You have to reduce the width accordingly.

    For Example; say that your width is 100 and your padding was 5px.

    Code:
    #someItem
    {
     width: 100px;
     padding: 5px;
    }
    Basically, it's 100px width WITH 5px padding (on the left, right, top and bottom). So, if the left and right add up to 10px; then reduce the width by ten pixels.

    Code:
    #someItem
    {
     width: 90px;
     padding: 5px;
    }
    That should be your solution.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Thanks; that seems to work, although it is not an ideal solution (I have a few Javascript functions that use the dimensions of this particular DIV).

    It seems illogical that padding on a nested DIV would expand the outer DIV. To me, I would expect the outer width and height to remain as they were defined. Even when defining padding on the outer DIV, I would still expect the outer dimensions to stay the same and instead make the inner dimensions smaller.

    EDIT: Added solution to my page, works perfectly. Thanks.
    Last edited by name _F1; 07-11-2007 at 07:56 AM.


  •  

    Posting Permissions

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