SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: align to bottom

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    Toronto, ON, Canada
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align to bottom

    I have a div that is 140px wide by 500px high. I have some content in it - spans, which fill the top third or so. What I would like to do next is add an image that will be at the bottom of the div box. I don't mind if I have to put in another div to contain the image. I can't get the image to fall to the bottom no matter whether I put it in a div or not. Any help?

    Thanks,

    Rob.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might set the image to be the background of the div:

    Code:
    #div {
    background: url(yourimage.jpg) bottom center no-repeat;
    }
    That should do the trick, provided that the text doesn't run over the image itself, which could make it difficult to read, etc.

    Alternatively, you could put the image in another div that was absolutely positioned to the bottom of the ancestor div. The only way this would work is if your main div is positioned, though...

    Code:
    #maindiv {
    position: relative (or something);
    blah blah blah
    }
    
    #imagediv {
    position: absolute;
    bottom: 5px;
    right: 20px; (or offset from either margin to "center" the image)
    }
    This second method might be more difficult, though.


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
  •