Post Image going past the bottom border

I’m running into a really weird problem with my blog posts. I have it set so that on the main page just the Time-stamp, Excerpt, and Thumbnail are displayed however the thumbnail image, if its taller than the excerpt text, keeps dropping over the bottom border of the post.
Here is what it look like NOW

and here is what it SHOULD look like

Here is what is creating the posts on my main page.

`<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=”article” id=”post-<?php the_ID(); ?>”>
<div class=”articleImage”>

“>
<?php
$szPostContent = $post->post_content;
$szSearchPattern = ‘~<img [^\>]*\ />~’;

preg_match_all( $szSearchPattern, $szPostContent, $aPics );

$iNumberOfPics = count($aPics[0]);

if ( $iNumberOfPics > 0 ) {
for ( $i=0; $i < $iNumberOfPics ; $i++ ) {
echo $aPics[0][$i];
};
};

?>

</div>
<div class=”articleText”>
<div class=”date”>posted on <?php the_date(); ?></div>
<img src=”https://www.ailea-studio.com/test/wp-content/themes/aileastudio/images/innerContentBorder.gif&#8221; alt=” ” />

<h2>“><?php the_excerpt(); ?></h2>
</div>

</div>

<?php endwhile; else: ?>
<div class=”article”>
<div class=”articleText”><?php _e(‘Sorry, no posts matched your criteria.’); ?></div>
</div>
<?php endif; ?>`

and the related css

`.article {
display:block;
position:relative;
top: 24px;
padding-top:30px;
padding-bottom: 20px;
width: 600px;
height:auto;
text-align:left;
padding-left:27px;
background: url(images/mainBorder.gif) no-repeat bottom right;
}

.article img{
float: right;
padding: 5px;
}

.articleText{
position:relative;
width: 288px;
text-align:right;
font-size:14px;
display: block;
}
.date {
margin-bottom: 26px;
text-transform:uppercase;

}
.date em{text-transform:lowercase;}

.articleText h2{
text-align:right;
font-size:30px;
color:#333333;
}

.articleImage{
position:relative;
margin-top: -50px;
right: 0px;
width: 306px;
float: right;
text-align:right;
display:block;

}

.articleImage img{text-align:right; display: block;};`