CSS image float question

Hi

I have a Views created block which is showing a single, random node title. I want to float a vertically aligned image to the right of the block.

I can't get my image to position correctly, see the screenshots.

My block-custom.tpl.php is::

</php
.....
    <div class="block-content"><?php print $block->content ?></div>
    <div class="block-image"><img src="/wrap/sites/default/files/learnmore.jpg"/></div>
....
?>

My blocks.css has:

#block-custom {
  border: solid 5px #000;
  font-size: 2em;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  width: 600px;
  display: block;
  margin: auto;
}

#block-custom .block-content{
	width: 400px;
	display: block;
	margin: auto;
}

#block-custom .block-image{
	float: right;
}

What's wrong with this?

Thanks

Glenn