Image at the Bottom

[Dragonusthei]

Hello.

I have a div that is the main content box.

Inside this div i have 2 images in divs.

Image and div 1 must sit at the top of the content box - No problems here.

Image and div 2 must always sit at the bottom of the content box - heres the problem.

I cannot get the image to stay at the bottom of the div regardless of the size of the content box.

I have tryed postion abolsute with bottom set to 0 but this sends it to the bottom of the page and not the div.

In the same way if i use margin-top: 100% it sends it to the bottom of the page as does padding.

Solutions?

[Wickham]

The position: absolute will take its position from the page or screen window normally, which is why your bottom image is at the bottom of the page.

However, if the containing div has position: relative, anything that is position: absolute inside it will take its position from the div dimensions and not from the page/screen dimensions.

This works as image 1 is at the top of the div and image 2 is at the bottom (I've just tested it):-

<div style="position: relative; width: 400px; height: 500px;
border: 1px solid black;">

<img style="position: absolute; top: 0; left: 200px;"
src="image1.jpg" alt="image 1">

<img style="position: absolute; bottom: 0; left: 300px;"
src="image2.jpg" alt="image 2">

</div>

See
http://www.wickham43.supanet.com/tutorial/divboxes.html