SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best practise for padding and margins for divs within divs

    Hello,

    Just wondering what the best practise is for aligning divs that are within a div. For example the following image:

    Screen shot 2011-12-01 at 17.18.12.png

    So I want to align the 'course finder' stuff that is all within [the pink] div. This is within the yellow div. Should I have padding on the yellow, outer div or should I just define the outer div's height and width then position the pink div and any other div absolutely within the yellow area? Or is there another method I should be using?

    Many thanks

    Jonno

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi Jonno,

    It partly depends on what the yellow div is for. If you use absolute positioning, any other content inside that div won't "see" the pink div, so there will be some overlapping. So the first question is—What else (if anything) will the yellow div be used for?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It may have some text underneath the search box like so:

    divs.png

    Cheers

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's fine if the text only goes underneath. But that latest image suggests that the form nearly fills the top part of the yellow box, in which case you don't need abs pos or similar. Just give the form some left padding and let it follow the natural document flow.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool thanks. So in this instance does it matter whether or not I use either a padding on the holder div or a magin/padding on the inner divs?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,096
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by JonnoW View Post
    Cool thanks. So in this instance does it matter whether or not I use either a padding on the holder div or a magin/padding on the inner divs?
    No, although if you use padding on the holder it will apply to everything inside it.


Tags for this Thread

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
  •