www.webdeveloper.com
Results 1 to 7 of 7

Thread: Padding and Margin?

  1. #1
    Join Date
    Dec 2002
    Posts
    216

    Padding and Margin?

    I'm having some trouble understand padding and margin.

    I want to make a layout that looks like the attachement: a container with a white background; then 4px away from the container's borders, an inner div that has a 1px border; and 10px away from the inner div's borders, the content of the website.

    When I'm playing with margin and padding, it either makes the container wider or makes the right part of the inner to go past the container's border.

    Could you guide me through the right direction?
    Attached Images Attached Images

  2. #2
    Join Date
    May 2003
    Location
    Andover, UK
    Posts
    410
    Do a search for 'box model' since a diagram will give you a better picture (no pun intended).

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Quote Originally Posted by hitman
    When I'm playing with margin and padding, it either makes the container wider or makes the right part of the inner to go past the container's border.
    - Make sure you have the correct and a complete DOCTYPE
    - You'll need to use nested divs, because you want white between the background and the border

    Code:
    <div style="width: 400px; padding: 4px; background: #fff; text-align: center;">
    <div style="width: 392px; border: 1px solid #444; padding: 10px; margin: 0 auto;">
    <p>text text text</p>
    </div>
    </div>
    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Setting a width and auto side margins on the inner div is not necessary, as the outer divs padding will determine the placement and size of the inner div :
    Code:
    <div style="width: 400px; padding: 4px; background-color: #FFFFFF;">
    <div style="border: 1px solid #444444; padding: 10px;">
    <p>text text text</p>
    </div>
    </div>
    Last edited by Centauri; 11-15-2007 at 04:33 PM.

  5. #5
    Join Date
    Dec 2002
    Posts
    216
    Quote Originally Posted by Centauri
    Setting a width and auto side margins on the inner div is not necessary, as the outer divs padding will determine the placement and size of the inner div :
    Code:
    <div style="width: 400px; padding: 4px; background-color: #FFFFFF;">
    <div style="border: 1px solid #444444; padding: 10px;">
    <p>text text text</p>
    </div>
    </div>
    The 400px div stretches to 408px, that's the same problem I had before. Is there a way to keep it 400px and still have the 4px padding?

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The width setting on anything is the internal width (available to contents), and padding and borders are added to this. If you want 4px padding and the external width to be 400px, then just set the width to 392px.

  7. #7
    Join Date
    Dec 2002
    Posts
    216
    Alright. Simple as that

    Thanks a lot for your help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles