SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative-margin on an image causes it to "slide under" the wrapper? Help!

    Hi everyone!

    The site is andrewjilka.biklopsdesign.com/work.

    What I want is very simple: images that butt up right to the left of the browser, ignoring the column layout and wrapper of the site. The easy way to accomplish this in my mind is to give the images a

    Code:
    margin-left: -70px;
    css declaration. However the images seems to "slide under" the wrapper! Why? How!? Can you tell I'm going crazy? Here's an image of the element in web inspector:

    tweeting: @biklops

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

    You have 2 parents with overflow;hidden applied so the nested imgae cannnot escape.

    Code:
    .excerpts-plus-excerpt {
        display: block;
        float: left;
        margin-bottom: 5px;
        overflow: hidden;
    }
    div.headway-leaf {
      float: left;
      min-height: 125px;
      overflow: hidden;
      width: 250px;
    }
    Remove those overflow properties and the image will appear. However if you were using overflow:hidden to clear floats then you will need to use another mechanism instead such as the clearfix routine.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! Lets hope this is the time I finally get through my head what overflow is!

    Thanks again!
    tweeting: @biklops


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
  •