Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post

    align image to bottom of page

    I have a webpage with a few divs, one of which contains the written content of the page.
    How can I make an image align to the very bottom right corner, so that it appears underneath the content of the page?
    I can do this by setting a background image for the body, and setting the position of the background image to bottom right, but this only works in IE & Safari, and shows no image in Firefox.
    My next thought was to create a div with the background image and align it to the very bottom right corner, but I can't seem to figure out how. I can only get it to align to the bottom of the 'window', but when there is enough content on the page to cause it to scroll, the image sits in the middle of the content. I can't put it directly under the content inside the same div because of the margins - it won't align all the way to the right side.

    Any advice?

  • #2
    Regular Coder ajhauser's Avatar
    Join Date
    Nov 2007
    Location
    Earlville. It's where Earls come from.
    Posts
    226
    Thanks
    74
    Thanked 1 Time in 1 Post
    Can you upload your source code or a link to the error and PM me?
    I have no idea what you're workin with here.
    Thanks.

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by queirdo View Post
    I have a webpage with a few divs, one of which contains the written content of the page.
    How can I make an image align to the very bottom right corner, so that it appears underneath the content of the page?
    I can do this by setting a background image for the body, and setting the position of the background image to bottom right, but this only works in IE & Safari, and shows no image in Firefox.
    My next thought was to create a div with the background image and align it to the very bottom right corner, but I can't seem to figure out how. I can only get it to align to the bottom of the 'window', but when there is enough content on the page to cause it to scroll, the image sits in the middle of the content. I can't put it directly under the content inside the same div because of the margins - it won't align all the way to the right side.

    Any advice?
    I'm curious about why the background-image placement did not work in FF. I would guess that there is a problem with your coding somewhere that's causing that issue. Are you coding with a valid doctype and using the HTML validator as you go? If not you should definitely start. There's also an old adage around here: "Code it for Firefox then hack it for IE." Doing it the other way around is much harder and consumes loads of time.

    The first way you tried it sounds like the way to go but if you're going to do option 2 from above don't bother with the div part. Just add the image as an <img> element. Use a float:right; and add margin-right:-50px; to get past the margins on the main content area. This is just speculative code, of course, without having seen what you are working with.

    If you can provide a link to your live test page that would be the absolute best thing. Second-best would be to provide the full source code HTML/CSS and probably even the image you are trying to place.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •