Side images bottom and top of content area

[gwmbox]

Hi all, I have two images that are being used on both sides of the pages content, one each side.

What I want to do is have the left image always showing on the left side at the bottom of the page but at no more than 400 pixels down from the menu

I can set it to a specific margin from the top, but if the page is shorter, e.g. 500px then it is too far down and lower than the footer area.

I hope my draft board attached explains better what I am trying to do. Obviously I am trying to make it cross browser supported (as much as I can but no longer need IE6 supported)

http://gmwebfiles.com/data/g/forumposts/2012/layout-side-images.png

CSS so far;

body {padding:0;margin:0;}
#headerwrap {display:block;width:960px;margin:0 auto;height:99px;}
#headerwrap #sitename {display:block;height:99px;float:left;width:700px;}
#sitelogo {margin:21px 5px 20px;display:block;background:transparent url(header-title.png) no-repeat 0 0;height:58px;width:445px;}
#headerwrap #headerimg {display:block;width:102px;height:99px;background:transparent url(img-header.png) no-repeat;float:right;}
#headerwrap h1, #headerwrap h2 {display:none;}
#menu {background:transparent url(menu.png) repeat-x;display:block;height:31px;}
#pagewrap {display:block;width:1288px;margin:0 auto;}
#pagewrap #leftside {display:block;width:160px;background:transparent url(left-side-img.png) no-repeat;height:436px;float:left;margin-top:400px;}
#pagewrap #rightside {display:block;width:160px;background:transparent url(right-side-img.png) no-repeat;height:436px;float:left;}
#contentwrap {display:block;width:960px;margin:0 auto;float:left;}
#content {display:block;height:500px;}
#footer {display:block;height:35px;}
/* clearfix */
.clearfix:after {content: ".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}

HTML so far;

<div id="sitewrap">
<div id="headerwrap" class="clearfix">
<div id="sitename">
<div id="sitelogo"></div>
</div>
<div id="headerhearts"></div>
</div>
<div id="menu" class="clearfix"></div>
<div id="pagewrap" class="clearfix">
<div id="leftside"></div>
<div id="contentwrap">
<div id="breadcrumbs"></div>
<div id="content">
<p>The Sites Content</p>
</div>
</div>
<div id="rightside"></div>
</div>
<div id="footer" class="clearfix"></div>
</div>

Cheers for your help

GW