Positioning an image at the bottom of a page

[Michiel]

Hi,

I'm currently working on a website and a want to position an image at the bottom of a page. I've given the image the id 'bottom' and use the following css to achieve it:

#bottom {
position: absolute;
bottom: 0px;
left: 0px;
}

The problem now is that the image doesn't show up at the bottom of the page, but at the bottom of the screen. This means that with a large page, the image is situated in the middle (vertically speaking).

Why does this happen? And more important how can it be solved?

Thanx in advance, Michiel

[me']

Hi,

I'm currently working on a website and a want to position an image at the bottom of a page. I've given the image the id 'bottom' and use the following css to achieve it:

#bottom {
position: absolute;
bottom: 0px;
left: 0px;
}

The problem now is that the image doesn't show up at the bottom of the page, but at the bottom of the screen. This means that with a large page, the image is situated in the middle (vertically speaking).

Why does this happen? And more important how can it be solved?

Thanx in advance, MichielFirst off: why: when using absolute positioning, the bottom and left co-ordinates are taken as measurements in respect to the viewport, not the document.

Now, a fix. It shoult be simple: just put the <img/> code at the end of the document, and let the flow take care of this. If you're using the float model to layout the page, you'll need to include it inside a <div> that you're clearing. If you're using AP to layout your page, it becomes a little complicated. The best solution is to include it inside the box that will take up the biggest vertical space.