Align Image Bottom Issue

HTML & CSS
1

I’m trying to make sure that the image in the right container aligns with the breaklin at the bottom regardless of height of the left container which has text in it as per http://boots2010.togetheragency.co.uk:8080/w/headoffice/our-stories/vibha-mistry/

The issue I have is that if the text increases then the image floats and stays in the same place as per http://boots2010.togetheragency.co.uk:8080/w/headoffice/our-stories/erica-devereux/

How can I align it so it always shows on the bottom?

Thanks in advance?

@charset "utf-8";

#ourstoriespageheader {
	float: right;
	width: 636px;
	padding-bottom: 0px;
	margin-bottom: 0px;
	border:0px solid red;
	}
	
#ourstoriesheaderquote { 
	padding-top: 10px;
	width: 636px;
	overflow: hidden;
	border:0px solid red;
}

#ourstoriespageheadertitle { 
	width: 636px;
	overflow: hidden;
}
	

#ourstoriespageheadertitle h1 {
	color: #00498F;
	font-weight: bold;
	font-size: 26px;
	margin: 0;
}

#ourstoriespageheadertitle p {
	font-size: 19px; 
	color: #44A5DC;
	margin-top: 6px;
}

#ourstoriespagesubtitle {
	font-size: 26px; 
	color: #44A5DC;
	margin-top:0;
	padding:0;
	border:0px solid red;
}


#ourstoriesinstruction {
	padding-top: 10px;
	font-size:12px;
	color:#605764;
	margin-top:10px;
	
}

#ourstoriesboxes	{
	float:right;
	width: 636px;
	overflow: hidden;
	background: transparent url('../images/common/dotted-splitter.gif') left top repeat-x;
	padding-top: 22px;
	margin-top:10px;
	border:0px solid red;
}


.ourstoriesrow	{
	clear:both;
	float:left;
	width:100%;
}

.ourstoriesboxleft {
	width:208px;
	height:101px;
	margin-bottom:7px;
	border:0px solid red;
	float:left;
	}
	
.ourstoriesboxcenter {
	width:208px;
	height:101px;
	margin-bottom:7px;
	border:0px solid red;
	float:left;
	margin-left:6px;
	}
	
.ourstoriesboxright{
	width:208px;
	height:101px;
	margin-bottom:7px;
	float:right;
	border:0px solid red;
	}


#ourstoriesbreakline {
	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
	margin-bottom: 10px;
	padding-top:10px;
	float:right;
	width: 636px;
	overflow: hidden;
	border:0px solid green;
}

#ourstoriesbreaklinenopadding {
	background: transparent url('../images/common/dotted-splitter.gif') left bottom repeat-x;
	margin-bottom: 10px;
	padding-top:1px;
	float:right;
	width: 636px;
	overflow: hidden;
	border:0px solid green;
}


#oustoriestitle	{
	color:#00498e;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	margin-bottom:5px;
	}
	
#ourstoriestext {
	float:left;
	width:312px;
	border:0px solid red;
	}
	
#ourstoriestext p {
	font-size:12px;
	color:#605764;
	margin-bottom:13px;
}

#ourstoriestext p strong {
	font-weght:bold;
	color:#00498e;
}


#ourstoriespicture	{
	margin-left:45px;	
	border:1px solid red;
	vertical-align:bottom;
	float:left;
	}

#ourstoriesfooter {
	float:left;
	margin-top:0px;
	width: 637px;
	border:0px solid red;
	}
	
#ourstoriesfootertitle	{
	color:#00498e;
	font-weight:bold;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:10px;
	}
	
#furtherstories {
	border:0px solid red;
	}

#furtherstories ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

#furtherstories ul li {
	float:left;
	border-right:1px solid #c0c0c0;
	width:158px;
	height:80px;
}

#obacklink {
	float:right;
	font-weight:bold;
}

#obacklink .morelink a {
	float: left;
	text-decoration: none;
	font-weight: bold;
	height: 19px;
	line-height: 19px;
	vertical-align: middle;
	padding-right: 24px;
	color: #00498F;
	background: transparent url('../images/common/arrow_button_a.png') right center no-repeat;
}

#obacklink  .morelink a:hover {
	background-image: url('../images/common/arrow_button_b.png');
}


#ourstoriesfooterspacer {
	float:left;
	width:100%;
	margin-bottom:40px;
	}
2

I didn’t test it but if set position: relative for #ourstoriesboxes you could set position absolute for .ourstoriesboxright.

By the way you limit yourself by giving certain divs a height. Better let it grow depending on the content.

3

Thanks. Spot on