[SOLVED] div positioning

[brown2005]

#area

{

 

width: 250px;

height: 300px;

border: 2px solid #627c10;

padding: 10px;

 

}

 

i have the above which creates a box, now wat i want to do is place an image in the bottom 50px of the div for the above, how can i do this please?

[Daniel0]

Try

#area img {
position: absolute;
bottom: 0px;
}

[brown2005]

nope that puts it to the bottom of the whole page

[Daniel0]

Try vertical-align in the div then.

[ToonMariner]

You could use a background
[code]#area
{
width: 250px;
height: 300px;
border: 2px solid #627c10;
padding: 10px;
background: transparent url(../image.gif) no-repeat bottom;
}

 

OR use some positioning

 

#area
{
width: 250px;
height: 300px;
border: 2px solid #627c10;
padding: 10px;
position: relative;
}

#area img
{
position: absolute;
bottom: 0;
}

 

Note you will have to use a dtd (like xhtml 1.1 or html 4.01 strict) that makes IE work in standards compliance mode for the positioning method.

[/code]