Im working on a site that is going to have a section on poker hand rankings.

Curently im having some problems geting a <div> to sit inside a paragraph.

Here is my HTML:

HTML Code:
<p>Here is some text before the king of spades <div class="spade">K</div> and here is the text after the king of spades.</p>
And the CSS:

.spade {
	display: inline;	
	font-weight: bold;
	padding-right: 8px;
	margin-right: 3px;
	background-image: url(poker_spade.gif);	
	background-repeat: no-repeat; 
In the browser the <div class="spade">K</div> sits on a new line?

How can you get a div to sit inside a paragraph?