CSS - Position One Image At Top One At Bottom

I have a logo which I would like always positioned at the bottom of a div.

Does anyone know a way of achieving this?

http://www.willisemail.co.uk/skill/

The logo is in the bottom right hand corner.

Cheers

Jemes


/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */


/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
background: #ccc url(../images/img_MainWhiteBg.jpg) repeat-y 50% 0;
}
/* Site Holder End */


/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */


/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: hidden;
}

#right2 {
margin-top:0px;
margin-left:14px;
margin-right:14px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}

.RightMenu {
margin-top:10px;
padding: 0px;
font-size: 13px;
color: #6884AE;
font-weight: bold;
}

.RightMenu ul
{
padding: 0px;
margin: 0px;
list-style-type:none;
}

.RightMenu li {
background-image: url(../images/img_Li_Image.jpg);
background-repeat: no-repeat;
background-position: 0em;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 14px;
margin-top:5px;
}

.imgTitle {
text-align:center;
margin-top: 13px;
margin-left:0px;
margin-right:0px;
}
/* Right2 Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
margin-left:0px;
margin-right:0px;
border: 1px solid #979696;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 1px;
padding-left: 0px;
margin:0px;
}

.Main {
padding:5px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}


.Cove{
margin-top:15px;
text-align:center;
}

Hello

Trying to position an image at the bottom of my webpage which:

a) will always stay at the bottom of the page regardless of length (page length not window height so the position: fixed is not quite what I'm looking for)
b) will not slide on top or under divs on my page (what position: absolute does) but instead stop moving up once it reaches content above it and the scrollbar appears (as tables do)
c) I can layer divs on top of

so far this is as close as I've got:

in the html

<!-- container for site info -->
<div id="container">

<!-- other content in divs here -->

<!-- other content in divs here -->

<!-- footer for bottom image -->
<div id="footer">

<!-- footer details, who / when / copyright -->
<div id="footerdetails">
details here
</div>
<!-- footer details, who / when / copyright -->

</div>
<!-- footer for bottom image -->

</div>

and in the css

#container
{
position: absolute;
top: 0px;
width: 750px;
height: 100%;
}

#footer
{
position: absolute;
bottom: 0px;
height: 230px;
width: 750px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: bottom left;
}

#footerdetails
{
position: relative;
margin: 0px 0px 0px 0px;
padding: 9px 0px 10px 70px;
top: 195px;
width: 680px;
text-align: left;
voice-family: "\"}\"";
voice-family:inherit;
}

I know I'm sort of answering my question above (tables) but I've seen this done with divs, just can't get the right combination of css - anyone have any ideas on this?

Thanks in advnace.

a+
gar

I'm trying to position a DIV on the right bottom side of the page using the following code:

position:absolute;
right:0;
bottom:0;

Unfortunately when I scroll down the page, the div remains in it original place :-(

I want a footer that's at the bottom of the page.

If there isn't much content that means it should be at the bottom of the screen and there will be no scrollbars.

If there is tons of content then it should show after the content and only be visible if the user scrolls to the bottom of the page.

This code shows what I'm after and the problem I'm hitting.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>title</title>
		<style type="text/css">
			body, html	{margin: 0; padding: 0; height: 100%}

			#top		{background: red; position: absolute; top: 0px; left: 0px; height: 50px; right: 0px;}

			#content	{background: orange; margin: 50px 200px;}

			#leftNav	{position: absolute; left: 0px; top: 50px; bottom: 50px; width: 200px; background: yellow}

			#rightNav	{position: absolute; right: 0px; top: 50px; bottom: 50px; width: 200px; background: cyan}			

			#bottom		{background:green;  position: absolute; bottom: 0px; left: 0px; height: 50px; right: 0px;}
		</style>
	</head>
	<body>
		<div id="content">
			Content<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>
		<div id="leftNav">
			LeftCol
		</div>
		<div id="rightNav">
			rightNav
		</div>
		<div id="top">
			I'm at the top.
		</div>
		<div id="bottom">
			I'm at the bottom.		
		</div>
	</body>
</html>

Appreciate your thoughts.