...

View Full Version : align image to bottom of page



queirdo
05-01-2009, 08:37 AM
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?

ajhauser
05-01-2009, 09:31 AM
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.

Rowsdower!
05-01-2009, 03:10 PM
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 (http://www.alistapart.com/articles/doctype/) and using the HTML validator (http://validator.w3.org/) 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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum