Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member TheGardener's Avatar
    Join Date
    Jun 2006
    Posts
    62
    Member #
    13332
    This is a simple question, but I haven't yet arrived at an answer I'm satisfied with. Let's say I've got a few divs on top of each other in a holder and I want to create a uniform vertical margin between them. I could give each div padding-bottom: 15px, but then there will be a padding below the bottom div, which will look funny.

    If I pad 15px on the top there'll be a strange empty area above the top div. I could add "style='padding-bottom: 0px'" to the bottommost div tag, but I'd rather not put styles in my HTML. I could give the divs no padding and use <br /> to space them, but again that would be using HTML for page layout.


    What's an elegant way to put padding in between a series of divs without having unwanted space at the top or bottom of the div series?

  2.  

  3. #2
    Senior Member beachkitty85's Avatar
    Join Date
    Feb 2007
    Location
    Apex, NC
    Posts
    131
    Member #
    14894
    Christina Van Dyke

    CRV Designs
    Apex, NC
    www.crv-designs.com

  4. #3
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Yes, but that's also achieved with a separate class for the last element, which may simply end up being an extraneous class.

    One way to do it would be to give whatever element follows the last div a negative top margin, which should counteract the padding (in theory), or, if you have a containing border, try giving it a negative bottom padding (this I don't think will actually work). Alternatively, often the bottom margin actually looks good as an extra spacer. But that depends on the context, of course.

  5. #4
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Do you have a footer or something below the bottom div? If that's the case you can put the negative top-margin on the footer so you keep the same styling on the other divs. Otherwise the simplest solution I see is what everyone else is saying: style the last div differently.
    Shani

    I have an eye for detail like you'd never believe.

  6. #5
    Member TheGardener's Avatar
    Join Date
    Jun 2006
    Posts
    62
    Member #
    13332
    That worked nicely, Shadowfiend. Thanks.

  7. #6
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Which one of the two or three solutions I proposed did it for yoU? :-D


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:50 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com