SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin/Padding Between Images Not Working

    Hi,
    Take a look at newwebsite.prosperaplace.com The two images on the right hand side of the screen are touching, and I want there to be a space between them so that the bottom of the second one will line up with the circles underneath the module to the left.

    I try adding a margin or padding to the bottom of the img,and it appears to work as when I highlight the image with firebug, it highlights space below the image, but it doesn't add a space below which separates the two images. However, when I add a margin to the top of the image, then both images have a margin but this is not what I want because then the top image doesn't line up with the module on the left. Any ideas? Thanks.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Couldn't you just give the bottom image a top margin to push it down a bit?

    You say you've tried it, but try only applying htat margin to one of the images.

    Aka give one image an id of...heck, #rocketimage, and then in the CSS, give that a margin.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your top image is inside an absolutely placed container and therefore a margin on the absolutely placed element will have no effect on other elements.

    The bottom element moves when you give a top margin because both elements are getting a top margin but the top image has no impact on the one below. It's just the top margin on the second element that makes it move. The fact that the top one moves as well has nothing to do with the flow of the page.

    You would need to apply a bottom margin to the parent container of that absolute image.

    e.g.
    Code:
    .slideshow {margin-bottom:20px}
    It looks like you fixed the problem by using a bigger image


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
  •